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

Question

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

Answer 1

我从pdf.js github http://jsbin.com/pdfjs-prevnext-v2/edit#html，从pdf.js github更新了示例，以正确地扩展到固定的canvas宽度。请参阅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

Answer 2

，以确保比例与所有页面尺寸（字母，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

在使用版本＆gt; = 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