Pdf.js: iPad Safari prints blank pages

[slimjim181]

As an iPad user
I want to be able to print my pdf documents from PDF.js
So I can have a hard copy

PDF file is not applicable but screenshots were taken from the example pdf https://mozilla.github.io/pdf.js/web/viewer.html

Configuration

• iPad Air 2
• iOS 9.3.5 (latest)
• Safari 9 (latest)
• PDF.js 0.8.0 (latest)

Steps to reproduce

• Click the print button on a document.
• Note the 'preparing for document printing' dialog comes up

Expected Behaviour

• The print dialog box opens up with the document present (as the screenshot in the workaround shows)
• And when I actually print the document to a printer the document is printed not just a blank page

Actual Behaviour

• The print dialog box comes up with blank page.
  
• And when you actually print the document to the printer the page is blank

A workaround

• Download the pdf document to the iPad by clicking the download button.
• Open in iBooks (app preinstalled by default)
• Click the share button
• Click print.
• The print dialog box opens with the document visible in its frame
  
  This screenshot ^ show the expected behaviour I would expect the print button to perform in PDF.js

[slimjim181]

Related issue: https://github.com/mozilla/pdf.js/issues/4582

[SyntaxUnknown]

FYI, I had to look into this issue to correct this same problem in production for our application. I have found that the code that cleans up the DOM after completing the print operation was firing too soon on the iPhone/iPad. In my case, I just increased the timeout from 20ms to 1000ms.

In pdf_print_service.js, I updated this:

setTimeout(resolve, 20); // Tidy-up.

to

setTimeout(resolve, 1000); // Tidy-up.

[adiq]

I discovered, that in some cases window.close() after print() can cause iOS Safari not to work properly. The only solution which I found is to add second timeout statement.

setTimeout(() => {
    window.print();
    setTimeout(() => {
        window.close();
    }, 1000);
}, 1000);

I don't know if that's the issue in this case, but I leave this information for others having similar problem.

[tlcoder]

I am seeing the same issue.

[sangyi7]

I have the same issues if I change the printer setting.

[AnsonWooBizCloud]

I have the same issue

[jordanhenderson]

Same issue. The fix above from @SyntaxUnknown allows PDF previews to be displayed, however upon printing I receive a blank page. I'll investigate this further and report back, does anyone have a solution?

[jordanhenderson]

Will try the solution from @adiq shortly.

[jordanhenderson]

Using the following performPrint function fixed the issue on iOS Safari for me:

performPrint: function () {
   this.throwIfInactive();
     return new Promise(function (resolve) {
      setTimeout(function () {
       if (!this.active) {
        resolve();
        return;
       }
       print.call(window);
       var printEvent = window.matchMedia('print');
       printEvent.addListener(function(printEnd) {
         if (!printEnd.matches) {
           resolve();
         };
       });
      }.bind(this), 0);
     }.bind(this));
    }

[jordanhenderson]

Apparently there are still issues with the above solution on > iOS 9.3.5.

[pedropcruz]

Well, i tried on several issues, maybe i had luck on this...

I am testing on my ipad, ios 9.3.5, on safari and no resulst of showing pdf:

The supost result, seeing on desktop, google chrome:

and when tested on ipad:

Any idea what it can be ?

thanks

[pedrojrivera]

Here is what I found:

To get printing to work on iPad iOS > 9.3.5 I had to comment out the resolve() method. The only issue is that the dialog box that shows the percent print completed remains open.

For now I am going to change the cancel button to "Done" once printing is completed so that the user can close the dialog box manually. At leas the printing will work as expected.

[vigorem]

@pedrojrivera I agree, this is unfortunately the only solution which worked for me (iOS11 - iPad Pro - Safari).

On Chrome I can't even make it work

[farshadmohajeri]

@pedrojrivera
I added below code to renderProgress() function, so "Cancel" becomes "Done" when progress is full!.

 if (progress == 100) {
    document.getElementById('printCancel').innerHTML = 'Done';
}

[pgtaboada]

2018, ios12 and still an open issue?

[gobinathm]

Yes Still a problem.

[ArchFolken]

Same problem here with new iPad pro 2018.
I'm using the viewer.html provided by Mozilla. I've seen your updates on the js functions, but I don't know where I should do those modifications.
Any help would be appreciated.
Thx.

[ArchFolken]

This bug is very old now and still not fixed. Anyone has a valid solution ? Or another lib to use to display and print a pdf on ipad plz ?

[MuhammadAziz]

This code works for me. This also resolve issue when you click cancel button on print dialog and print for second time. Tested on iOS 11.0.1

document.addEventListener("DOMContentLoaded", function(){
  var printQuery = window.matchMedia('print');
  PDFViewerApplication.beforePrint = function(method){
    return function(){
      method.apply(this, arguments);
      if(this.printService){
        this.printService.performPrint = function(print){
          return function(){
            var that = this;
            return new Promise(function(resolve){
              function printListener(){
                setTimeout(function(){
                  printQuery.removeListener(printListener);
                  resolve();
                }, 1000);
              }
              printQuery.addListener(printListener);
              print.call(that);
            });
          }
        }(this.printService.performPrint)
      }
    }
  }(PDFViewerApplication.beforePrint);
})