PDF.js 使用滚动条渲染 pdf答案

【问题标题】：PDF.js render pdf with scrollbarPDF.js 使用滚动条渲染 pdf
【发布时间】：2015-07-02 13:20:15
【问题描述】：

我使用 mozilla pdf.js。我有一个代码：

<canvas id="the-canvas"/>
function displayDocument(){
        PDFJS.getDocument(numberOdDocument[attachment]).then(function (pdfDoc_) {
            pdfDoc = pdfDoc_;
            renderPage(pageNum);
          });
    }
function renderPage(num) {
        pdfDoc.getPage(num).then(function(page) {
          var viewport = page.getViewport(scale, rotate);
          canvas.height = '900';
          canvas.width = '500';

          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          var renderTask = page.render(renderContext);

          renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
        });
    }

现在我在画布标签中只看到一页，但我想在我的画布上添加滚动条，并且我想用滚动更改页面。我该怎么做？

【问题讨论】：

寻找同样的东西...

标签： javascript jsp spring-mvc pdf

【解决方案1】：

允许滚动

首先，创建一个父div来封装canvas元素：

<div>
 <canvas id="the-canvas"/>
</div>

然后，用垂直滚动设置固定大小

<div style="width:650px;height:600px;overflow-y:scroll;">...</div>

最后，您可以使用变量“scale”设置您想要的比例，但保留这些原始行：

function renderPage(num) {
 pdfDoc.getPage(num).then(function(page) {
  var viewport = page.getViewport(scale);
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  ...

渲染所有页面

请记住，渲染大量页面需要一些时间，但这里是如何做到的。

想法：您需要在单独的画布元素中呈现每个页面。

首先，在渲染期间动态创建具有特定 id 的画布元素：

<div id="pdf-viewer"></div>
...
function renderPage(num) {
 pdfDoc.getPage(num).then(function(page) {
  var canvasId = 'pdf-viewer-' + num;
  $('#pdf-viewer').append($('<canvas/>', {'id': canvasId}));
  var canvas = document.getElementById(canvasId);
  ...

最后，为每个页面调用 renderPage()

function renderAllPages() {
 for (var i = 1; i <= pdfDoc.numPages; i++) {
  renderPage(i);
 }
}

【讨论】：