PDF.js render pdf by scrolling

Question

I am using mozilla pdf.js. I have a 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; } }); }); } 

Now I see only one page in the canvas tag, but I want to add a scrollbar to my canvvas, and I want to change the page with the scroll. How can i do this?

Answer 1

Allow Scrolling

First create a parent div to encapsulate the canvas element:

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

Then set a fixed size with vertical scroll

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

Finally, you can set the scale you want using the "scale" variable, but keep these source lines:

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

All page rendering

Keep in mind that it will take a little time to display a large number of pages, but here's how to do it.

Idea: you need to display each page in a separate canvas element.

First, dynamically create a canvas element with a specific identifier during 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); ... 

Finally, call renderPage () for each page

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