Angularjs 打印预览未显示正确的格式
我有一个格式为两列的表单。我使用这个插件在我的应用程序上实现了打印:打印预览正在显示。但是,它不遵循我的表单的2列格式。如何打印两列 以下是我的表单的html代码:Angularjs 打印预览未显示正确的格式,angularjs,ionic-framework,Angularjs,Ionic Framework,我有一个格式为两列的表单。我使用这个插件在我的应用程序上实现了打印:打印预览正在显示。但是,它不遵循我的表单的2列格式。如何打印两列 以下是我的表单的html代码: <form id="myFormMain"> <div class="row"> <div class="col-xs-6"> <input type="text" style="background-color:#d3d3d3" readonly ng-mo
<form id="myFormMain">
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mmid" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="cardNumber" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="fname" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="gender" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="birthplace" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="lname" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="citizenship" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="bday" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="sssTinID" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="email" style="background-color:#d3d3d3" readonly ng-model="email" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyName" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="mobile" class="form-control">
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="companyAddress" class="form-control" >
</div>
</div>
<div class="row">
<div class="col-xs-6">
<!--<input type="text" style="background-color:#d3d3d3" readonly ng-model="address" class="form-control">-->
<textarea readonly ng-model="address" class="form-control" ></textarea>
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="workTitle" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="city" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="srcFunds" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="zipcode" class="form-control" >
</div>
<div class="col-xs-6">
<input type="text" style="background-color:#d3d3d3" readonly ng-model="otherSrcFunds" class="form-control" >
</div>
</div>
</form>
这是我在controller.js中的打印功能:
$scope.goPrint = function(divName)
{
var divEl = document.getElementById('myFormMain');
var allInputs = divEl.querySelectorAll("input,textarea");
for( var counter = 0; counter < allInputs.length; counter++)
{
var input = allInputs.item(counter);
input.setAttribute("value", input.value);
}
var page = document.getElementById('myFormMain').innerHTML;
cordova.plugins.printer.print('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div><img src="img/kYYXJ9o0Qk6yNSgx8ZLb_imgpsh_fullsize.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"></div><div align="center">' + page + '</body></html>', 'review2.html');
}
$scope.goPrint=函数(divName)
{
var divEl=document.getElementById('myFormMain');
var allInputs=divEl.querySelectorAll(“输入,文本区域”);
用于(变量计数器=0;计数器
我不确定网格库在哪里(例如,ionic或bootstrap)
cordova.plugins.printer.print(
'
//或ionic.css或缺少某些内容
...
'、'review2.html')`
cordova.plugins.printer.print(
'<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" /> // or ionic.css or something is missing
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body> ... </body>
</html>', 'review2.html');`