PDF.js render pdf with scrollbar

Question

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

現在我看到的只有一個頁面的canvas標籤，但我想添加滾動條我canvvas，我想帶滾動改變頁面。我怎樣才能做到這一點？

Answer 1

允許滾動

首先，創建一個父div來封裝所述畫布元件：

<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的canvas元素中渲染：

<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); 
} 
}