2017-04-24 36 views
0

2つの列に書式設定された書式があります。私はこのプラグインを使用して私のアプリで印刷を忠実にしました:https://github.com/katzer/cordova-plugin-printerと印刷プレビューが表示されています。しかし、私のフォームの2列形式に従っていません。どのように私は2列を印刷するのですか?ここ印刷プレビューに正しい書式が表示されない

は私のフォームのHTMLコードです:

<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'); 

} 

答えて

0

私はわかりませんが、どこグリッド・ライブラリがある(例えば、イオン、またはブートストラップ)

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');` 
関連する問題