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

Posted 2023-02-24

【中文标题】PDF.js 在固定宽度上缩放 PDF

【英文标题】：PDF.js scale PDF on fixed width

【发布时间】：2012-10-13 20:09:12

【问题描述】：

我有一个固定框，我想在其中显示由 PDF.js 呈现的 PDF。由于 PDF.js 文档不是真正可访问的（通过他们的源文件吐口水），我想知道是否可以在固定宽度上缩放呈现的 PDF。当我为显示 PDF 的画布设置为 CSS：canvas width: 600px; 时，PDF 被拉伸，质量变差。

【参考方案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

【讨论】：

非常感谢，我不知道canvas元素的CSS宽度和HTML5宽度属性的区别。

那么，如果画布有width: 100%（css 属性），我可以使用window.screen.width 值而不是canvas.width 对吗？我的意思是，就像var viewport = page.getViewport(window.screen.width / page.getViewport(1.0).width);（顺便说一句，这对我来说很好用）

必须使用canvasContainer.clientWidth 然后它工作。谢谢！

使用这个公式，我的 pdf 在页面上看起来仍然更小，质量也不好。这是我正在使用的：

canvas.width = window.screen.width; console.log(window.screen.width); var viewport = page.getViewport(canvas.width / page.getViewport(0.9).width); canvas.height = viewport.height; canvas.width = viewport.width; canvas.style.height = viewport.height; canvas.style.width = viewport.width;

【参考方案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);

【参考方案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