Question

我正在研究 ElectronJS 和 Reactjs 项目，以构建一个使用热敏打印机打印文档（作为Web HTML格式）的应用程序。

热敏打印机在宽度为50mm或80mm但没有高度限制的特殊纸张上打印文档。

我使用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 },() => {});

我认为我的问题与这个one非常接近。

任何想法都会有所帮助，

Answer 1

我修复了它。我只是从position: fixed;和html, body中都删除了#print。

ElectronJS打印HTML文档的高度问题

1 个答案: