PDF.js 按固定宽度缩放 PDF

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

属性来更改画布的宽度。请参阅 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

Answer 4

简单查看器

如果您使用简单查看器

PDFViewer

类；

TLDR：

    // get the first page "PDFPageView" object
    const view = pdfViewer.getPageView(0)
    const container = document.getElementById('viewerContainer')
    
    // get the unscaled viewport of the page
    const pageVp = view.pdfPage.getViewport({ scale: 1.0 })

    // Eventually add a margin to the container for the scrollbar in the viewer
    scale = pageVp.width / (container.clientWidth)

初始化；

const eventBus: EventBus = new EventBus()

  const pdfViewer = new PDFViewer({
    container: container,
    eventBus: eventBus,
    // linkService: pdfLinkService,
    // findController: pdfFindController
  })

HTML：

<div id="viewerContainer">
  <div id="viewer" class="pdfViewer"></div>
</div>