ElectronJS print HTML 文档高度问题

Question

我正在开发一个 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 },() => {});

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

任何想法都会有所帮助，

Answer 1

我修好了。我只是从 html, body 和 #print.

中删除了 position: fixed;

ElectronJS print HTML 文档高度问题

ElectronJS print HTML document height problems

html

printing

thermal-printer

reactjs

electron