I'm working on a ElectronJS and Reactjs project to build an application that prints documents (as web HTML format) using thermal printers.
Thermal printers prints documents on special papers with 50mm or 80 mm of width but it has no limits of height.
I use Reactjs to generate HTML Contents and CSS3 print media style to hide screen contents #root and show only what i want to print #print,
@media only print {
@page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
height: auto !important;
width: 70mm !important;
}
html, body {
margin: 0 !important;
padding: 0 !important;
position: fixed;
left: 0;
top: 0;
background: #eee !important;
font-family: 'Tahoma', 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Verdana, sans-serif !important;
visibility: hidden;
height: auto !important;
width: 70mm !important;
overflow: visible !important;
}
#root {
display: none !important;
visibility: hidden !important;
}
#print {
display: block;
position: fixed;
left: 0;
top: 0;
visibility: initial !important;
padding: 1px !important;
background: white;
border: none;
outline: none;
margin-left: 5mm;
height: auto !important;
width: 70mm !important;
overflow: visible !important;
}
}
The problem is when i try to print long pages, it print only the upper part of it. I figure out that it is related somehow with the screen height. Because it print the exact same part that appear when i show the print scope and it ignore the scrollable part of the document.
webContents.print({ silent: true, printBackground: false, printerName },() => {});
I think my issue is very close to this one.
Any idea will be helpful,
