Pdf.js: iPad Safari prints blank pages

Created on 6 Sep 2016  路  19Comments  路  Source: mozilla/pdf.js

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.
    ipad-print-3
  • 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
    ipad-print-4
    This screenshot ^ show the expected behaviour I would expect the print button to perform in PDF.js
4-os-ios 4-printing

Most helpful comment

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.

All 19 comments

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.

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.

I am seeing the same issue.

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

I have the same issue

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?

Will try the solution from @adiq shortly.

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));
    }

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

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:

image

and when tested on ipad:

pdf_idp_error

Any idea what it can be ?

thanks

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.

@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

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

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

2018, ios12 and still an open issue?

Yes Still a problem.

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.

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 ?

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);
})
Was this page helpful?
0 / 5 - 0 ratings

Related issues

patelsumit5192 picture patelsumit5192  路  3Comments

kleins05 picture kleins05  路  3Comments

xingxiaoyiyio picture xingxiaoyiyio  路  3Comments

timvandermeij picture timvandermeij  路  4Comments

hp011235 picture hp011235  路  4Comments