Custom page margins using print.js

Question

I am attempting to print payment receipt using thermal POS printer using Print.js library. I can successfully print the page using the printjs. But the print comes with extra margins as per A4 page.
Is there any way to print it to fit to 58mm with to page margins?
Also it would be very helpful if any alternatives to print using JavaScript are given. Following is my work.

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>

Aldali · Accepted Answer · 2020-12-30T19:59:10.630

1

1- Instead of using printJS() with the default two arguments, you can pass an object as argument so:

printJS('invoice-print-div', 'html'); should be replaced with:

printJS({printable: 'invoice-print-div', type: 'html',style: ['@page { size: A4; margin: 0mm;} body {margin: 0;} h4 {margin:0}'], targetStyles: ['*']});

Please note that when it comes to actual printing, the property style in the argument object is where you can pass your custom style that should be applied to the html being printed.

I have made a demo in stackblitz Please do check it out.

For more information you can check PrintJS configuration options

2- As you ask for some alternatives of PrintJS, You can checkout jsPDF Library and here some explanations about it.

edited Dec 30 '20 at 19:59

answered Dec 30 '20 at 19:34

Aldali

40
5

this really works!!! but is there any method that this would work for 58mm POS printer? Because as I checked your example, it has A4 sized paper and my data can have numerous row. Is there any way around in this case? – Atharva Kale Dec 30 '20 at 19:42
1

Yes, you can set the value of **size** to `size: 58mm;` try it and let me know :), The number of rows does not matter, as POS printer will keep printing until the last row. – Aldali Dec 30 '20 at 19:45
For more information about size, you can refer to [@page/size](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size) – Aldali Dec 30 '20 at 19:53

Custom page margins using print.js

HTML & JS

1 Answers1