ElectronJS 打印 HTML 文档高度问题答案

【问题标题】：ElectronJS print HTML document height problemsElectronJS 打印 HTML 文档高度问题
【发布时间】：2019-06-20 21:07:53
【问题描述】：

我正在开发一个 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 非常接近。

任何想法都会有所帮助，

【问题讨论】：

标签： reactjs html printing electron thermal-printer

【解决方案1】：

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

【讨论】：