使用 print.js 自定义页边距
Custom page margins using print.js
我正在尝试使用 Print.js 库使用热敏 POS 打印机打印付款收据。我可以使用 printjs 成功打印页面。但是打印出来的 A4 页面有额外的边距。
有什么方法可以打印它以适合 58 毫米和页边距吗?
如果给出使用 JavaScript 打印的任何替代方法,这将非常有帮助。以下是我的作品。
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<div class="text-center" style="width:58mm;background-color:red;">
<h4>alpha</h4>
<table border="0">
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>abc</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td>pqr</td>
<td>2</td>
<td>240</td>
</tr>
<tr>
<td>xyz</td>
<td>4</td>
<td>360</td>
</tr>
</table>
</div>
</div>
<script>
$("#print-receipt").on("click", function() {
printJS("invoice-print-div", "html");
});
</script>
1- 除了使用带有默认两个参数的 printJS() 之外,您还可以传递一个对象作为参数,因此:
printJS('invoice-print-div', 'html');
应替换为:
printJS({printable: 'invoice-print-div', type: 'html',style: ['@page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});
请注意,在实际打印时,参数对象中的 属性 style 是您可以传递应应用于html 正在打印。
我已经在stackblitz中制作了一个演示,请查看。
更多信息您可以查看PrintJS configuration options
2- 当你要求一些 PrintJS 的替代品时,你可以查看 jsPDF Library and here 一些关于它的解释。
我正在尝试使用 Print.js 库使用热敏 POS 打印机打印付款收据。我可以使用 printjs 成功打印页面。但是打印出来的 A4 页面有额外的边距。
有什么方法可以打印它以适合 58 毫米和页边距吗?
如果给出使用 JavaScript 打印的任何替代方法,这将非常有帮助。以下是我的作品。
HTML & JS
<button id="print-receipt">print to pos</button>
<div id="invoice-print-div" class="hidden">
<div class="text-center" style="width:58mm;background-color:red;">
<h4>alpha</h4>
<table border="0">
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
</tr>
<tr>
<td>abc</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td>pqr</td>
<td>2</td>
<td>240</td>
</tr>
<tr>
<td>xyz</td>
<td>4</td>
<td>360</td>
</tr>
</table>
</div>
</div>
<script>
$("#print-receipt").on("click", function() {
printJS("invoice-print-div", "html");
});
</script>
1- 除了使用带有默认两个参数的 printJS() 之外,您还可以传递一个对象作为参数,因此:
printJS('invoice-print-div', 'html');
应替换为:
printJS({printable: 'invoice-print-div', type: 'html',style: ['@page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});
请注意,在实际打印时,参数对象中的 属性 style 是您可以传递应应用于html 正在打印。
我已经在stackblitz中制作了一个演示,请查看。
更多信息您可以查看PrintJS configuration options
2- 当你要求一些 PrintJS 的替代品时,你可以查看 jsPDF Library and here 一些关于它的解释。