PDF.js render pdf z przewijakiem

Question

Używam mozilla pdf.js. Mam kod:

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

teraz widzę tylko jedną stronę w tagu płótnie, ale chcę dodać pasek przewijania do moich canvvas i chcę zmienić stronę z przewijania. Jak mogę to zrobić?

Answer 1

Pozwól przewijania

Najpierw należy utworzyć div aby otoczyć element płótnie:

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

Następnie ustawić stały rozmiar z pionowym przewijaniem

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

Wreszcie, możesz ustawić żądaną skalę za pomocą zmiennej "scale", ale zachowaj oryginalne linie:

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

Render wszystkie strony

Pamiętaj, że czynią dużo stron zajmie trochę czasu, ale tutaj jest, jak to zrobić.

Idea: musisz renderować każdą stronę w osobnym elemencie canvas.

Najpierw utwórz dynamicznie elementu canvas z określonym identyfikatorem podczas renderowania:

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

Wreszcie, zadzwoń renderPage() dla każdej strony

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