I'm working in a React page, and I'm using react-to-print for printing. But now I need to print in a thermal paper printer. Those that prints tokens, tickets, etc.
I've already looked over this question, but I still don't know which size to set or how to create a size.
And I've already looked over the source code, to learn more about the argument pageStyle and found this as default:
"@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; } }"But I didn't figured out how to set this argument to print at thermal printer size.
What argument do I pass in pageStyle parameter to print in that size? Is there a list of page styles or a way of configuring a new page style? How do I test this without a printing?
To print on a thermal paper printer, you need to set the paper size to the correct value. Thermal paper printers come in different sizes, so you need to determine the size of the paper you are using.
One way to set the paper size in react-to-print is to use the @media print CSS rule. You can define a new style for the paper size and apply it only when the page is being printed. Here's an example:
const pageStyle = ` @media print { @page { size: 80mm 150mm; /* set the size of your thermal paper here */margin: 0; } body { margin: 0; font-size: 12px; } } `;In the @page rule, you can set the width and height of the paper in millimeters, and in the body rule, you can adjust the font size and margins to fit the paper.
To test this without printing, you can use the browser's print preview feature. In Chrome, you can press Ctrl+P (Windows) or Cmd+P (Mac) to open the print dialog, and then click the "Print preview" button to see how the page will look when printed.