JavaScript 打印用POS打印机纸张尺寸

Question

I am trying to print specific div in POS printer. My printer name is Optimuz . I also tried with

<div id="printAreaInvoice" style="visibility: hidden;font-size:8px;width:200px;"></div>
                        
<input type='button' id='printInvoice' value='Print'>

 $(document).on('click','#printInvoice',function () {
            printJS({
                maxWidth: 440, // the width of your paper
                printable: 'printAreaInvoice', // the id
                type: 'html',
                css: 'print.css' // your css
            });
        });

I loaded print content after page loaded. $('#printAreaInvoice').html(response.printData);

contents loads on div like

echo '<table class="tblData" style="width:100%;font-size:8px;">';
echo '<tr>';
echo '<td style="font-size:8px;">'.$item_name.' ---- '.$per_item_price.' </td>';

echo '</tr>';
echo '</table>';

But it takes full width. Still I did not connect printer because of availability . How can I fix that. Is it possible on that printer. Thanks in advance

Answer 1

Last time I tried to use this library to print to POS printer. You can check the library here PrintJS Library

When you use this library you can do something like this

<div id="print">
    <h1>My Heading</h1>
    <p>My Paragraph</p>
</div>

And to print this one you can use something JS like this

printJS({ 
          maxWidth: 375, // the width of your paper
          printable: 'print', // the id
          type: 'html',
          css: 'print.css' // your css
});

In your print.css you will have something like this

@media print {
  #print h1 {
    font-size: 18pt;
  }
  #print p {
    font-size: 12pt;
  }
}