Wrong scale and viewport when printing

[tryggve]

We have built our own viewer upon the pdf.js library and I have experienced some issues regarding to print. Our viewer displays one or two pdf-pages based on the ratio of the window. Resize your browser window until you see a single page of the newspaper and make sure it is page 23. For some reason the Firefox print functionallity doesn't like it when you resize the window so you may need to reload the page if the browser shows you a dialog saying something unexpected went wrong. But when you have a single page and it is page number 23 and try to print the pages the output is in the wrong scale. If you use Chrome you can print the spread of page 22-23 and in this scenario page 22 get's ok but 23 will be wrong.

Each page in the newspaper is a separate pdf document and I load the pages using the same worker. I have used the same pattern as in the pdfjs-viewer for setting up and rendering to a new canvas in a printContainer and using that for the print output.

I have used the print pattern from the pdfjs-viewer and in the PDFPageView_beforePrint function the following two lines seems to make all the difference:

var viewport = pdfPage.getViewport(1);
var PRINT_OUTPUT_SCALE = 2;

The thing is that if I change it so I call getViewport with the scale of 2 and give the PRINT_OUTPUT_SCALE the value of 1 the print output is correct.

The attached page is only one example, the bug occurs on different pages and I haven't figured out why. I think the bug occurs when rendering the page to the canvas because if I inspect the element with chrome web inspector I can see that the canvas in the dom has the wrong scale.

scale_print_problem.pdf
PDF file attached is password protected: 3d329e5531f5d674b70dba4b9f0a6ae5

Configuration:

• Web browser and its version: Firefox 47.0.1, Chrome 51.0.2704.103 (64-bit)
• Operating system and its version: OSX El Capitan 10.11.6
• PDF.js version: 1.3.62#084bb86 (also tried the latest 1.5)
• Is an extension: No

Steps to reproduce the problem:

1. Press the print-button in the GUI or cmd-p on your keyboard while viewing a single page (page number 23).
2. Print or preview the page.

What is the expected behavior?
Should print the entire contents of the page

What went wrong?
Prints the upper left part of the page

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): http://webapp.im-epaper.se/pdfjs/print-bug/#pages/10902/3/23

[alonisoft]

for me the same problem when i open the pdfjs viewer in a pop up window (resize to client screen),
the doc printed is resized smaller then the real file much for about the quarter of the page...

also tried to view the file by pure browser (chrome + firefox) and i see it very good but on print i get 14 blank pages from your demo viewer- take a look here : https://aloni.azurewebsites.net/partials/pdfjs/web/viewer.html

[yurydelendik]

Now PDF.js prints pages as the sizes specified by the PDF document. See if scaling issues addressed by #7677. I also suspect that CSS width of document is not set properly and it's pushing right margin far the the right -- hard to test that for "@media print" needs and more experimentation. Closing as answered.

[alonisoft]

I suugest you give a try to print from https://mozilla.github.io/pdf.js/web/viewer.html.
The printing is very bad!

why won't we use the browser print preview with a link to the file as print preview ?

[yurydelendik]

@alonisoft offtopic here, but ff implemented font loading api which does not work with mozPrintCallback. The issue is tracked somewhere else.

[alonisoft]

ok,
and what about the use of browser's print preview which seems to me the best "clean and easy" :) ?
or, open the specified link file in a new tab (not download) and let the browser do the rest... ?

[yurydelendik]

I'm sorry it's hard to answer the questions above -- to many threads of the discussion (probably good for IRC conversations but not for issue tracking). Please read https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md to request more detailed response.