Я работаю над проектом ElectronJS и Reactjs для создания приложения, которое печатает документы (в формате веб-HTML) с использованием термопринтеров.
Термопринтеры печатают документы на специальной бумаге шириной 50 или 80 мм, но не имеют ограничений по высоте.
Я использую Reactjs для генерации HTML-содержимого и стиль печати на CSS3 для скрытия содержимого экрана #root
и показывать только то, что я хочу напечатать #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;
}
}
Проблема в том, что когда я пытаюсь напечатать длинные страницы, он печатает только верхнюю часть.Я понял, что это как-то связано с высотой экрана .Поскольку он печатает ту же самую часть, которая появляется, когда я показываю область печати, и он игнорирует прокручиваемую часть документа .
webContents.print({ silent: true, printBackground: false, printerName },() => {});
Я думаю, что моя проблема очень близка к этому один .
Любая идея будет полезна,