时间戳

首页 > 解决方案 > Electron js webContents.print 选项不起作用（总是在 A4 页面上打印）

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

问题描述

我正在开发一个电影票务应用程序，当我打印票时，它总是打印在 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');
        });
    })

打印结果

打印页面结果

我需要删除票周围的空白并使票适合页面。

标签： javascriptnode.jselectrondesktop-application

解决方案

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

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

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

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

推荐阅读