我修复了它。我只是从
我正在开发一个ElectronJS和Reactjs项目,以构建一个使用热敏打印机打印文档(以web 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 },() => {});
我认为我的问题与这个问题非常接近。
任何想法都会有帮助,
html, body
和#print
中删除了position: fixed;
。