PDF.js rendering pdf con barra di scorrimento

Question

Uso mozilla pdf.js. Ho un codice:

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

Ora vedo solo una pagina nel tag canvas, ma voglio aggiungere barra di scorrimento ai miei canvvas, e voglio cambiare pagina con scorrimento. Come lo posso fare?

Answer 1

Consenti scorrimento

In primo luogo, creare un div genitore per incapsulare l'elemento canvas:

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

Quindi, impostare una dimensione fissa con scorrimento verticale

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

Infine, puoi impostare la scala che desideri usando la variabile "scala" ma mantieni queste linee originali:

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

Render tutte le pagine

tenere a mente, che rendono un sacco di pagine vorrà un po 'di tempo, ma qui è come farlo.

Idea: è necessario rendere ogni pagina in un elemento canvas separato.

In primo luogo, creare dinamicamente l'elemento canvas con uno specifico ID durante il rendering:

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

Infine, chiamare renderPage() per ogni pagina

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