带有 PDFJS 的响应式 pdf 渲染器答案

【问题标题】：Responsive pdf renderer with PDFJS带有 PDFJS 的响应式 pdf 渲染器
【发布时间】：2018-04-13 18:37:02
【问题描述】：

我对 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>

【问题讨论】：

这里有几个问题，删除 disableWorker，并跟踪何时为特定画布调用渲染（您可以创建一个新画布并替换旧画布）——当绘画开始/结束时，您不能不跟踪单个画布用于多个异步操作。
非常感谢！只需更换画布，效果就更好了！所以我创建了一个函数来生成我的画布，并在调整大小时用新的替换旧的。如果有用的话，我已经更新了下一个代码。

标签： javascript pdf canvas resize pdfjs

【解决方案1】：

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

lib 的文档有些有限，我通过查看源代码找到了解决方案，并找到了以下代码（pdf.js/web/app.js@webViewerResize:lines 2449-2464 on github）：

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 版“测试”

【讨论】：