javascript - 打印预览关闭后未触发 OnPrintDialogClose 方法

Question

您好我正在使用 PrintJs javascript 库。我在 OnPrintDialogClose 选项中分配了一个回调函数。它没有在打印预览窗口关闭后立即触发，但仅在我切换到新的浏览器选项卡或在 Windows 操作系统上按 Alt+Tab 后才触发。有谁知道为什么打印预览窗口关闭后它没有触发。

这是我的Codepen 示例

这是我的 javascript 代码片段。

<script>
    var afterPreviewClose = function(){ 
       window.location = "index.html"; 
    };
    $("#btnPrint").on("click",function(){ 
       printJS({ 
          printable: 'print-area',
          type: 'html', 
          onPrintDialogClose: afterPreviewClose,
          css: 'styles/styles.css' }); 
       }); 
</script>

score 2 · Accepted Answer

我在以下链接中尝试了 slebetman 的解决方案https://github.com/crabbly/Print.js/issues/348

let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);

printJs({

    printable: url,

    onPrintDialogClose: () => {

    clearInterval(focuser);

    // do your thing..

},

onError: () => {

    clearInterval(focuser);

    // do your thing..

  }

});

score 0 · Accepted Answer

最后，我最终使用普通的 javascript 打印功能而不是使用库，因为在打印对话框关闭后立即重定向到另一个页面是我页面的必备功能。我还向 PrintJs 团队报告了这些问题，以便他们进行审查。我目前对这个问题的解决方案是使用正常的 onafterprint函数实现，如下所示。

主页 (index.html)

 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"> 
    </script>
    <style>
       .print-area {
          width: 300px;
       }

       .print-area table {
          width: 100%;
       }

       .print-area table,
       th,
       td {
        border-collapse: collapse;
        border: 1px solid;
        text-align: center;
       }

       .print-area th {
         background-color: grey;
         color: white;
       }

       @media print {
           .print-area {
              width: 300px;
              height: 400px;
           }

           .print-area table {
              width: 100%;
           }

           .print-area table,
           th,
           td {
             border-collapse: collapse;
             border: 1px solid;
             text-align: center;
           }

           .print-area th {
              background-color: grey;
              color: white;
           }

           .no-print {
             display: none;
           }
       }
     </style>
  </head>

 <body>
    <div class="print-area">
       <table>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
         </tr>
         <tr>
            <td>Si Thu </td>
            <td>28</td>
            <td>Yangon</td>
         </tr>
         <tr>
            <td>WWK </td>
            <td>27</td>
            <td>Yangon</td>
         </tr>
      </table>
   </div>
   <div class="no-print" style="margin-top:50px;">
     <button id="btnPrint">Print</button>
   </div>

     <script>
        $(document).ready(function () {
              $("#btnPrint").on("click", function () {
                window.onafterprint = function () {
                   console.log("onafterprint function fired");
                   window.location = "nextpage.html";
                };
                window.print();
              });
         });
     </script>
  </body>

</html>

打印对话框关闭后要重定向的页面 (nextpage.html)

<html>
   <head>
       <title>Next Page</title>
   </head>
   <body>
       <h2>This is redirected page</h2>
   </body>
</html>

javascript - 打印预览关闭后未触发 OnPrintDialogClose 方法

2 回答 2

Related