OnPrintDialogClose method was not fired after print preview closed

user_3316817 0
Viewed 1073

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>
printjs html javascript
2 Answers

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

  }

});
user_52151740

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