Electron js webContents.print 选项不起作用（总是在 A4 页面上打印）答案

【问题标题】：Electron js webContents.print options not working (always prints on A4 page)Electron js webContents.print 选项不起作用（总是在 A4 页面上打印）
【发布时间】：2021-08-11 22:18:30
【问题描述】：

我正在开发一个电影票务应用程序，当我打印票时，它总是打印在 A4 页面上。我需要小页面上的票，而不是全尺寸 a4 页面上的票。我尝试使用 CSS 解决此问题，但页面大小的结果始终相同。

HTML 模板

data:text/html;charset=utf-8,
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Print Ticket</title>
   <style type="text/css">
   </style>
</head>
<body>
   <div>
      <div style="width: 471px; height: 431px; padding-left: 20px; border-radius: 10px 10px 0 0; font-family: Helvetica; display: flex">
         <div style="  width: 470px;">
            <div style="display: flex;">
               <div style="height: 80px">
                  <h1 style="border-bottom: 6px rgb(147, 47, 60) solid;">YABOUS TICKET</h1>
               </div>
            </div>
            <div style="width: 470px; display: flex;">
               <div style="max-width: 280px">
                  <div style="width: 310px; height: 70px; display: flex; justify-content: space-between;">
                     <div style="width:240px"> <span style="font-weight: 550; font-size: 20px">EVENT</span>
                        <br> <span style="font-size: 20px">%event%</span> 
                     </div>
                  </div>
                  <div style="height: 70px; max-width: 290px"> 
                     <span style="font-weight: 550; font-size: 20px">HALL</span>
                     <br> <span style="font-size: 20px">%hall%</span> 
                  </div>
                  <div style="height: 70px"> <span style="font-weight: 550; font-size: 20px">TICKET NO.</span><span style="font-weight: 550; font-size: 20px; margin-left: 90px;">PRICE</span>
                     <br> <span style="font-size: 20px">%seatNo%</span> <span style="font-size: 20px; margin-right: 35px; float: right">%ticketPrice%</span> 
                  </div>
                  <div style="height: 90px; display: flex; align-items: flex-end">
                     <div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">FLOOR</span>
                        <br> <span style="color: rgb(69, 68, 67); font-size: 25px"><b>%floor%</b></span> 
                     </div>
                     <div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">SEAT</span>
                        <br> <span style="color: rgb(69, 68, 67); font-size: 25px"><b>%seat%</b></span> 
                     </div>
                     <div style="width: 80px; height: 70px"> <span style="font-weight: 550; font-size: 15px">ROW</span>
                        <br> <span style="color: rgb(69, 68, 67); font-size: 25px;"><b>%row%</b></span> 
                     </div>
                  </div>
                  <div>
                     <span style="font-size: 11px; color: rgb(147, 47, 60)">GATE CLOSES 30 MINUTES BEFORE EVENT START</span>
                  </div>
               </div>
               <div style="width: 185px; display: flex; justify-content: center; flex-direction: column; padding-top: 30px">
                  <div style="display: flex; justify-content: center; width: 100%">
                     <div>
                        <span style="font-weight: 550; font-size: 16px">EVENT TIME</span>
                        <br>
                        <div style="display: flex;flex-direction: column;"> <span style="font-size: 25px"><b>%time%</b></span> <span style="color: rgb(69, 68, 67); font-size: 20px;">%date%</span> </div>
                     </div>
                  </div>
                  <div style="display: flex;justify-content: center; align-items: center; height: 200px"> <img src="%qrCode%" width="200"> </div>
               </div>
            </div>
         </div>
      </div>
      <div style="width: 496px; height: 23px; background: rgb(147, 47, 60); border-radius: 0 0 10px 10px;color: white; font-family: Helvetica; display: flex; justify-content: space-between; padding-right: 12px; padding-left: 12px; font-size: 15px; padding-top: 5px; -webkit-print-color-adjust: exact; ">
         <span>
         <b>WWW.YABOUS.ORG</b>
         </span>
         <span>
         <b>YABOUS</b>
         </span>
      </div>
   </div>
</body>

JS 代码

    const options = {
        silent: false,
        marginType: 1,
        landscape: true,
        pagesPerSheet: 1,
        collate: true,
        copies: 1,
        printBackground: true,
        pageSize: {
          height: 454,
          width: 471
        }
    }

    let win2 = new BrowserWindow({
        height: 454,
        width: 471,
        icon: __dirname + `/dist/storyteller/assets/favicon.ico`
    });

    win2.setMenu(null);

    win2.loadURL(page);
    // win2.webContents.reload();
    // let win = BrowserWindow.getAllWindows()[0]; 

    win2.webContents.on('did-finish-load', () => {
        win2.webContents.print(options, (success, failureReason) => {
            if (!success) console.log(failureReason);

            console.log('Print Initiated');
        });
    })

打印结果

Print page result

我需要删除工单周围的空白，使工单适合页面。

【问题讨论】：

标签： javascript node.js electron desktop-application

【解决方案1】：

根据 Electron 关于 webContents.print () 的文档，pageSize 对象只能指定 height 属性（尽管它被声明为在 Size 对象中同时提供 width 和 height）。由于文档对宽度模棱两可，我猜如果操作系统未将其报告给 Electron 为“支持”，它将被计算为匹配列出的支持的页面格式之一。因此，由于您的 height 不匹配任何支持的格式（您的操作系统），Electron 默认为 A4。

有人可能会争辩说，造成这种情况的原因是大多数消费者打印机无论如何都使用列出的纸张尺寸格式之一，并且可以通过不允许任何其他纸张格式来防止事故发生。此外，Chrome 不允许通过其 UI 设置任意页面高度/宽度，这可能也是 Electron 没有实现这一点的原因（Electron 基于 Chromium，Chrome 的开发版本）。

如果您必须将页面大小保持在您的特殊格式，webContents.printToPDF () 方法可能是下一个最好的方法，因为它允许指定任意宽度和高度测量值。链接的文档页面提供了如何使用此函数写入文件的示例。然后，您可以调用外部 PDF 阅读器并从那里打印文件，但这是一个新问题的内容。

如果您没有能够在 471mm x 454mm 纸张上打印的专用打印机，我建议您坚持使用 A4。如果您需要 PDF 格式的页面，只需参考上面链接的文档。而且由于您似乎正在编写某种票务软件：如果您为客户准备 PDF 文件，也请坚持使用 A4 并让客户将纸张折叠成所需的格式。这就是欧洲大多数在线购票的运作方式。

【讨论】：

谢谢。我决定从 node express 服务器生成一个 pdf 文件，并在外部浏览器中打开文件 URL。
如果这对您有所帮助，请单击左侧的灰色复选标记图标将答案标记为“已接受”和/或投票。
已经投票了。我的声望低于 15，这就是为什么它没有显示在答案中。
但是，只有通过单击灰色复选标记接受才会向其他人表明此问题已得到充分回答，不需要其他答案。谢谢！
这是不正确的。这是一个Size 对象，它需要width 和height。它只是被错误记录了。 Electron 似乎在打印时会出现页面大小和方向被完全忽略的问题。