Question

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

Answer 1

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

重要的一行是

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

因为表达式canvas.width / page.getViewport(1.0).width为我们提供了适当的缩放因子。

您应该更改画布的宽度，而不是使用css，而是使用画布的width属性。见Canvas width and height in HTML5

Answer 2

为确保缩放适用于所有页面尺寸（Letter，A4，A5等），您必须考虑到页面尺寸更改时高度和宽度之间的比例会有所不同。例如，流行的页面大小（以英寸为单位）是：

信：8.5 x 11 ..比率为0.772
A4：8.27×11.7 ..比率0.706
A5：5.83×8.27 ..比率为0.704

您可以通过考虑高度和宽度来计算正确的比例，并且只缩放较小的量。这将确保一切适合您的画布。此外，如果您更改画布的宽度或高度，则不会破坏任何内容。

var unscaledViewport = page.getViewport(1);
var scale = Math.min((canvas.height / unscaledViewport.height), (canvas.width / unscaledViewport.width));
var viewport = page.getViewport(scale);

Answer 3

如果使用版本 >= 2.1 及更高版本，它需要一个对象，即格式化为 getViewport({ scale, rotation, dontFlip })：

const viewport = page.getViewport({scale: canvas.width / page.getViewport({scale: 1}).width});

#10369 [api-minor] 更改 PDFPageProxy 上的 getViewport 方法，以获取参数对象而不是一堆（随机）排序的参数

https://github.com/mozilla/pdf.js/pull/10369

PDF.js在固定宽度上缩放PDF

3 个答案: