带有 PDFJS 的响应式 pdf 渲染器

Question

我对 PDFJS 和画布有点问题。

我可以在页面上显示 PDF，我也可以在页面的整个宽度中显示 PDF（几乎，我不知道要考虑滚动条）但是我在调​​整大小事件时仍然有问题。

在resize事件中，发现有些页面无缘无故颠倒了......

你能帮我吗？

谢谢 ！

编辑：使用替换画布！

 /* http://code.jquery.com/jquery-3.2.1.min.js http://mozilla.github.io/pdf.js/build/pdf.js */ $(function() { PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; /* Generate scaled page's canvas */ var generatePageCanvas = function(pdfDiv, page) { var canvas = document.createElement('canvas'); var divWidth = pdfDiv.width(); var pageWidth = page.getViewport(1).width; var renderContext = { canvasContext: canvas.getContext('2d'), viewport: page.getViewport(divWidth / pageWidth) }; canvas.height = renderContext.viewport.height; canvas.width = renderContext.viewport.width; page.render(renderContext); return canvas; } /* Render a PDF's page, with resize event */ var renderPage = function(pdfDiv, page) { var canvas = generatePageCanvas(pdfDiv, page); pdfDiv.append(canvas); $(window).resize(() => { var resizedCanvas = generatePageCanvas(pdfDiv, page); canvas.replaceWith(resizedCanvas); canvas = resizedCanvas; }); }; /* Render a PDF file */ var renderPdf = function(pdfUrl, pdfDiv) { PDFJS.getDocument(pdfUrl).then(pdfDoc => { for (var num = 1; num <= pdfDoc.numPages; num++) { pdfDoc.getPage(num).then(page => { renderPage(pdfDiv, page); }); } }); }; /* Search and render data-pdf attributes */ $('div[data-pdf]').each(function() { var pdfDiv = $(this); var pdfUrl = pdfDiv.data('pdf'); pdfDiv.css('overflow', 'auto') .css('max-height', '180px'); renderPdf(pdfUrl, pdfDiv); }); /* Simulate window resize event */ $('button').click(function() { var i = 400; var interval = setInterval(() => { i += 20; document.body.style.width = i + "px"; window.dispatchEvent(new Event('resize')); }, 250); setTimeout(() => { clearInterval(interval); }, 1000); }); });

 <html> <head> <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <button> Simulate resize </button> <div data-pdf="//cdn.mozilla.net/pdfjs/tracemonkey.pdf"></div> <div data-pdf="//cdn.mozilla.net/pdfjs/helloworld.pdf"></div> </body> </html>

Answer 1

这是一篇旧帖子，但当我最近遇到同一主题时，我找到了一个解决方案，可以将pdfviewer更新为新尺寸，例如在调整呈现查看器的容器大小之后。

lib 的文档有些有限，我通过pdf.js/web/app.js@webViewerResize源代码找到了一个解决方案，并找到了以下代码段（ pdf.js/web/app.js@webViewerResize : github 上的第pdf.js/web/app.js@webViewerResize 行）：

function webViewerResize() {
  const { pdfDocument, pdfViewer } = PDFViewerApplication;
  if (!pdfDocument) {
    return;
  }
  const currentScaleValue = pdfViewer.currentScaleValue;
  if (
    currentScaleValue === "auto" ||
    currentScaleValue === "page-fit" ||
    currentScaleValue === "page-width"
  ) {
    // Note: the scale is constant for 'page-actual'.
    pdfViewer.currentScaleValue = currentScaleValue;
  }
  pdfViewer.update();
}

通过在我的回调中应用相同的序列， viewer根据我配置的currentScaleValue相应地“调整大小”。

这感觉有点“自动”工作，因为我没有花时间深入研究源代码。 因此，请随意添加任何细节以说明其有效的原因。

---

免责声明：使用 pdfjs-dist 的 2.9.359 版“测试”