Printing PDF using pdf.js

Question

I am embedding a single page PDF in a page using pdf.js and I want to be able to print just the PDF, not the whole HTML page.

Is this possible?

Solution 1

I finally worked it out.

I can't post my code here, but here's what I did:

I rendered the PDF onto 2 canvases, one small for the thumbnail and one huge for printing (hidden). I then had a print button that opened a new window containing an img tag containing the contents of the huge canvas using toImageURL(). The print() function was called on the new window, followed by close() to close it automatically once printed.

This resulted in an almost-full-size print of the PDf, albeit with the usual page no and datestamp from the browser.

Solution 2

I had previously loaded a pdf document onto a canvas using pdf.js.

The canvas only contains one page. So This is what worked for me for a single page:

  var canvas = document.getElementById('pdfPage');
  var win = window.open('', '', '');
  var html = "<img src='" + canvas.toDataURL() + "'>";
  win.document.write(html);
  win.document.close();
  win.focus();
  win.print();
  win.close();

I still need to find out what is needed for multiple pages. If I do, I'll edit this answer.

I have to say this approach is not optimal, because it doesn't print the pdf page "camera ready" or in other words in it's original form. It prints an image of the pdf page. The difference is the margins that should not be there and the header / footer that should not be there, as they are not in the original document. Therefore, I'm going to be looking for an approach that prints it like the pdf.js viewer prints it -- in it's original form with fidelity to the orignal document.

Solution 3

We can put following code at the end of viewer.js file which will automatically print pdf:

(function () {
    function printWhenReady() {
        try{
            if (PDFViewerApplication.initialized) {
                window.print();
            }
            else {
                window.setTimeout(printWhenReady, 3000);
            }
        }catch(ex){
            window.setTimeout(printWhenReady, 3000);
        }
    };

    printWhenReady();
})();

Comments

[colincameron]

Everything is in my answer. You just need to read the documentation and think a little, rather than blindly copy and paste some code you don't understand.

[BvuRVKyUVlViVIc7]

I like blind pasting code much more than reading answers which tell me that i should think more myself..

[Ryand.Johnson]

I never found a toImageURL in the documentation. I did find a toDataURL() in the documentation. I used that I got it work well.

[The Unknown Dev]

Did you ever find anything?

[toddmo]

@Jamil, search my answers for pdf. I'm not with that company any more.

[Imran Zahoor]

Negative score on accepted answer is weired, that shoudn't happen.

[colincameron]

@ImranZahoor I think people didn't like that I explained what I did rather than just posting the code (which belonged to a client so I couldn't share it anyway)