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

Question

我有一个固定的框,我想在PDF.js中显示我的PDF.由于PDF.js文档无法真正访问(通过源文件进行吐出),我想知道是否可以在固定宽度上缩放渲染的PDF.当我设置为CSS时: canvas { width: 600px; }对于显示PDF的画布,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属性来更改画布的宽度.请参阅HTML5中的Canvas宽度和高度

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