PDF.js render pdf mit Bildlaufleiste

Question

Ich benutze mozilla pdf.js. Ich habe einen Code:

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

Jetzt sehe ich nur eine Seite in Leinwand-Tag, aber ich will Scrollbar meine canvvas hinzufügen, und ich Seite ändern möchte mit Scroll. Wie kann ich das machen?

Answer 1

zulassen scroll

Zuerst ein Elternteil div erstellen Sie das Canvas-Element zu kapseln:

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

Dann

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

schließlich eine feste Größe mit einer vertikalen Scroll-Set, Sie können den gewünschten Maßstab mit der Variablen "scale" einstellen, behalten Sie jedoch diese ursprünglichen Zeilen bei:

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

Render alle Seiten

Denken Sie daran, dass viele Seiten machen wird ein wenig Zeit in Anspruch nehmen, aber hier ist, wie es geht.

Idee: Sie müssen jede Seite in einem separaten Canvas-Element rendern.

Erstellen Sie zunächst dynamisch das Canvas-Element mit einer bestimmten ID während machen:

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

Schließlich ruft renderPage() für jede Seite

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