CODEWITHSUNDEEP
javascriptpdfprintingpdf.js
colincameron
colincameron

Reputation: 2704

Printing PDF using pdf.js

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?

Upvotes: 10

Views: 46141

Answers (5)

Gabriel Weidmann
Gabriel Weidmann

Reputation: 887

The answer from JPatel led me to a solution that works for me.

I got a document management system with version control. If I select a document or a specific version I will get a preview. I want to be able to print the visible preview from a button.

The pdf container is like the following:

<object id="@_pdfPreviewId" type="application/pdf" data="@GetOpenPdfPath()"></object>

I use blazor, so @_pdfPreviewId is a randomized id and @GetOpenPdfPath() returns the download path for the preview file.

So now:

  1. I call feed in the new download url into the preview
  2. I call the following JS function when the user presses a print button:
async function print(pdfContainerId) {
    var container = document.getElementById(pdfContainerId);
    var pdfWindow = container.contentWindow;

    var app = pdfWindow.PDFViewerApplication;

    while (!(app.initialized && app.downloadComplete)) {
        await delay(1000);
    }

    pdfWindow.print();
}

const delay = ms => new Promise(res => setTimeout(res, ms));

Now the loop loops until the preview is ready and then this beatiful dialog ...

Preview is getting prepared

... appears

Upvotes: 0

A Tsai Kao
A Tsai Kao

Reputation: 51

You might to use Print.js library to print PDF file.

To navigate this url: https://printjs.crabbly.com/

Upvotes: 1

toddmo
toddmo

Reputation: 22466

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.

Upvotes: 7

JPatel
JPatel

Reputation: 103

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

Upvotes: 3

colincameron
colincameron

Reputation: 2704

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.

Upvotes: -6

Related Questions