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.

score 75 · Accepted Answer · edited May 23 '17 at 11:46

75

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

edited May 23 '17 at 11:46

Community

1
1

answered Oct 23 '12 at 21:02

halex

16,253
5
58
67

Thanks a lot, I didn't know about the difference between the CSS width and HTML5 width properties of the canvas element. – sluijs Oct 25 '12 at 12:49
1

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_) – Mr_Green Mar 04 '15 at 06:12
Had to use `canvasContainer.clientWidth` then it worked. Thanks! – lony Nov 02 '15 at 23:10
with this formula my pdf still looks smaller on the page and quality is not good. Here is what I am using : – newdeveloper May 14 '19 at 19:46
1

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; – newdeveloper May 14 '19 at 19:46
You have an error in your example "PDFJS is not defined" – Akim Kelar Mar 15 '21 at 09:25

score 18 · Answer 2 · answered Nov 11 '15 at 22:27

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

score 8 · Answer 3 · answered Jun 15 '21 at 16:52

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

PDF.js scale PDF on fixed width

3 Answers3

Linked