【问题标题】:Custom page margins using print.js使用 print.js 自定义页边距
【发布时间】:2020-12-30 13:47:48
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

    标签: javascript html css printing printjs


    【解决方案1】:

    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做了一个demo,请看一下。

    更多信息可以查看PrintJS configuration options

    2- 当您要求 PrintJS 的一些替代品时,您可以查看 jsPDF Libraryhere 一些关于它的解释。

    【讨论】:

    • 这真的有效!!!但是有什么方法可以适用于 58mm POS 打印机吗?因为当我检查你的例子时,它有 A4 大小的纸,我的数据可以有很多行。在这种情况下有什么办法吗?
    • 是的,你可以将size的值设置为size: 58mm;试试看告诉我:),行数无所谓,因为POS打印机会保持打印到最后一行。
    • 关于size的更多信息可以参考@page/size
    猜你喜欢
    • 2013-07-19
    • 1970-01-01
    • 2011-09-13
    • 1970-01-01
    • 2019-05-23
    • 1970-01-01
    • 1970-01-01
    • 2018-11-06
    • 1970-01-01
    相关资源
    最近更新 更多