PDF.js scale PDF on fixed width
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
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);
In case of using version >= 2.1 and later it takes an object, i.e. formatted asgetViewport({ 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