OnPrintDialogClose method was not fired after print preview closed

Question

Hi I am using PrintJs javascript library. I assigned a call back function in OnPrintDialogClose option. It didn't fired immediately after the print preview window was closed but it only fired after I switched to new browser tab or I press Alt+Tab on Windows OS. Does anybody know why it didn't triggered after print preview window close.

This is my Codepen sample

This is my javascript code snippet.

<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>

The issue seems to be related with Chrome on windows. Here is a link for the active thread in the lib repo: https://github.com/crabbly/Print.js/issues/348 — crabbly, Sep 26 '20 at 17:50

score 2 · Answer 1 · answered Oct 19 '20 at 12:03

I tried slebetman's solution in the following link 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 · Answer 2 · answered Aug 18 '20 at 14:51

Finally, I end up using normal javascript print features instead of using the library because immediate redirect to another page after the print dialog close is a must feature for my page. I also reported that issues to the PrintJs team so that they can review it. My current solution for this problem is using normal onafterprint function implementation as follows.

Main Page (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>

Page to be redirected after print dialog close (nextpage.html)

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

OnPrintDialogClose method was not fired after print preview closed

2 Answers2