PDF.js render pdf с прокруткой

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

Теперь я вижу только одну страницу в холст тега, но я хочу добавить скроллбар моим canvvas, и я хочу изменить страницу с свитка. Как я могу это сделать?

Answer 1

Разрешить прокрутки

Во-первых, создать родительский DIV инкапсулировать брезентовый элемент:

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

Затем установите фиксированный размер с вертикальной прокрутки

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

Наконец, вы можете установить масштаб, который вы хотите, используя переменную «шкала», но сохраните эти исходные строки:

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

Рендер все страницы

Имейте в виду, что делают много страниц займет немного времени, но вот как это сделать.

Идея: вам нужно отображать каждую страницу в отдельном элементе холста.

Во-первых, создать динамически брезентовый элемент с определенным идентификатором при рендере:

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