ElectronJS打印HTML文档高度问题



我正在开发一个ElectronJSReactjs项目,以构建一个使用热敏打印机打印文档(以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;

最新更新