PDF.js scale PDF on fixed width

javascript pdf mozilla pdf.js
sluijs picture sluijs · Oct 23, 2012 · Viewed 44.5k times · Source

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.

Answer

halex picture halex · Oct 23, 2012

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

Related questions

pdf.js : how to properly set the initial scale?

I'm try to adapt pdf.js (complete version) to my needs, I just want to set the initial scale to 'page-fit' whatever the previous scale. So I try to modify viewer.js to achieve this ... First the DEFAULT_SCALE global (…

Read More
Generating PDF files with JavaScript

I’m trying to convert XML data into PDF files from a web page and I was hoping I could do this entirely within JavaScript. I need to be able to draw text, images and simple shapes. I would love …

Read More
Download and open PDF file using Ajax

I have an action class that generates a PDF. The contentType is set appropriately. public class MyAction extends ActionSupport { public String execute() { ... ... File report = signedPdfExporter.generateReport(xyzData, props); inputStream = new FileInputStream(report); contentDisposition = "attachment=\"" + report.getName() + "\""; contentType = "application/pdf"; return …

Read More