Javascript PDF.js使用滚动条呈现PDF

我使用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;
            }
          });
        });
    }

函数displayDocument（）{
PDFJS.getDocument（numberOdDocument[附件]）。然后（函数（pdfDoc){
pdfDoc=pdfDoc；
渲染页面（pageNum）；
});
}
函数呈现页面（num）{
pdfDoc.getPage（num）.然后（函数（第页）{
var viewport=page.getViewport（缩放、旋转）；
canvas.height='900'；
canvas.width='500'；
var renderContext={
画布背景：ctx，
视口：视口
};
var renderTask=page.render（renderContext）；
renderTask.promise.then（函数（）{
pageRendering=false；
如果（pageNumPending！==null）{
渲染页面（pageNumPending）；
pageNumPending=null；
}
});
});
}

---

现在我在canvas标签中只看到一个页面，但我想将scrollbar添加到我的canvvas中，并且我想用scroll更改页面。我该怎么做呢？

允许滚动

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

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

呈现所有页面

请记住，渲染大量页面将需要一点时间，但下面是如何做到这一点

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

首先，在渲染期间使用特定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);
  ...

...
函数呈现页面（num）{
pdfDoc.getPage（num）.然后（函数（第页）{
var canvasId='pdf查看器-'+num；
$（'#pdf查看器'）。追加（$（''，{'id'：canvasId}））；
var canvas=document.getElementById（canvasId）；
...

最后，为每个页面调用renderPage（）

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

函数renderAllPages（）{
对于（var i=1；我正在寻找相同的东西。。。
<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);
  ...

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