PDF.js在固定宽度上缩放PDF [英] PDF.js scale PDF on fixed width

问题描述

我有一个固定的框，我想在PDF.js中显示我的PDF文件。由于PDF.js文档无法真正访问（通过源文件进行吐出），我想知道是否可以在固定宽度上缩放渲染的PDF。当我设置为CSS时： canvas {width：600px; } 对于显示PDF的画布，PDF被拉伸，质量变差。

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.

推荐答案

我更新了Pdf.js github中的示例 http://jsbin.com/ pdfjs-prevnext-v2 / edit #html，live 可以正确缩放到固定的画布宽度。有关我的代码，请参见 http://jsfiddle.net/RREv9/ 。

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.

重要的一行是

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

因为表达式 canvas.width / page.getViewport（1.0）.width 为我们提供了适当的缩放系数。

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

您应该使用css而不是宽度更改画布的宽度画布的属性。请参阅 HTML5中的画布宽度和高度

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

这篇关于PDF.js在固定宽度上缩放PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！