5

I'm trying to add print functionality to a multi-page PDF embedded in a web page that is using the PDF.js library. It's problematic because I only have one page rendered at a time when a user is viewing it and the page is really rendered as an image in a canvas element.

This question does not help in this case because it is for a single page PDF where printing the current contents of the canvas are acceptable. Same with this question. I also want to avoid just opening the PDF in another tab/window and telling the user to print it themselves, which defeats the purpose of embedding it into the page.

Looking through the documentation from Mozilla, I haven't found any native functions that will just print the PDF, however, I will start playing around with the renderingIntent which seems like it can be set to 'print'.

EDIT: redingIntent doesn't seem to affect anything and the PDF stills renders the same way whether it is set to 'display' or 'print'.

Community
  • 1
  • 1
The Unknown Dev
  • 3,039
  • 4
  • 27
  • 39

1 Answers1

1

Remember PDF.js is just another web page. ATM, at least not in the standard HTML5 APIs, there is no way for a web page push random information directly to printers (but you can push it to the cloud printing service) -- you can print only what you "see". "See" means what's in the DOM, and currently CSS can be used to hide information for the screen or printer. The DOM can also be changed the beforeprint/afterprint events.

In you case, since your PDF view in embedded, you need to fake DOM to have all PDF's pages/canvases on the main web page, make them visible for print and hide for screen (see e.g. [4]). Few different problems needs to be solved too that might be off-topic here: removing margins and non-rasterizing canvas. Firefox is dealing with those via moznomarginboxes [1] and mozPrintCallback [2] -- both are created in support of PDF.js and not supported by other browsers. (See also polyfill for the latter [3])

async5
  • 2,505
  • 1
  • 20
  • 27