PDF.js scale PDF on fixed width

Question

I have a fixed box where I want to display my PDF's in rendered by PDF.js. As PDF.js documentation is not really accessible (spitting through their source files), I'd like to know whether it's possible to scale a rendered PDF on a fixed width. When I set as CSS: canvas { width: 600px; } for the canvas displaying the PDF, the PDF gets stretched, and the quality gets poor.

Solution 1

I updated the example from the Pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html,live to scale properly to a fixed canvas width. See http://jsfiddle.net/RREv9/ for my code.

The important line is

var viewport = page.getViewport(canvas.width / page.getViewport(1.0).width);

because the expression canvas.width / page.getViewport(1.0).width gives us the appropriate scaling factor.

You should change the width of your canvas not with css but by the width attribute of the canvas. See Canvas width and height in HTML5

Solution 2

To ensure that scaling works with all page sizes (Letter, A4, A5, etc.) you must take into account that the ratios between height and width with vary when page sizes change. For example a popular page sizes (in inches) are:

• Letter: 8.5 x 11.. ratio of 0.772
• A4: 8.27 × 11.7.. ratio of 0.706
• A5: 5.83 × 8.27.. ratio of 0.704

You can calculate the correct scaling by considering both height and width and only scaling the amount that is smaller. This will ensure everything fits on your canvas. Additionally, should you change the width or height of your canvas, you will not break anything.

var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);

Solution 3

In case of using version >= 2.1 and later it takes an object, i.e. formatted as getViewport({ scale, rotation, dontFlip }):

const viewport = page.getViewport({scale: canvas.width / page.getViewport({scale: 1}).width});

#10369 [api-minor] Change the getViewport method, on PDFPageProxy, to take a parameter object rather than a bunch of (randomly) ordered parameters

https://github.com/mozilla/pdf.js/pull/10369

Comments

[sluijs]

Thanks a lot, I didn't know about the difference between the CSS width and HTML5 width properties of the canvas element.

[Mr_Green]

So, if canvas has width: 100% (css property), I can use window.screen.width value instead of canvas.width right? I mean, like var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width); (btw, this is working fine for me)

[lony]

Had to use canvasContainer.clientWidth then it worked. Thanks!

[newdeveloper]

with this formula my pdf still looks smaller on the page and quality is not good. Here is what I am using :

[newdeveloper]

canvas.width = window.screen.width; console.log(window.screen.width); var viewport = page.getViewport(canvas.width / page.getViewport(0.9).width); canvas.height = viewport.height; canvas.width = viewport.width; canvas.style.height = viewport.height; canvas.style.width = viewport.width;

[Achim Krauß]

You have an error in your example "PDFJS is not defined"