40

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

4

3 回答 3

72

我从 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为我们提供了适当的比例因子。

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

于 2012-10-23T21:02:28.787 回答
16

为确保缩放适用于所有页面尺寸（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);
于 2015-11-11T22:27:51.557 回答
4

如果使用版本 >= 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

于 2021-06-15T16:52:56.290 回答