javascriptpdffirefoxpdf.js

PDF.js scale PDF on fixed width

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

  • 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