How to display the whole PDF (not just one page) using PDF.JS?

Question

I created this demo:

http://polishwords.com.pl/dev/pdfjs/test.html

One page is displayed. I would like to display all the pages. One below the other, either place some buttons to change the page or even better load all the standard PDF.JS controls, as in Firefox. How to do it?

Answer 1

PDFJS has a numPages member numPages , so you just numPages over them. BUT it is important to remember that receiving a page in pdf.js is asynchronous, so the order will not be guaranteed. Therefore, you will need to connect them. You could do something in this direction:

 var currPage = 1; //Pages are 1-based not 0-based var numPages = 0; var thePDF = null; //This is where you start PDFJS.getDocument(url).then(function(pdf) { //Set PDFJS global object (so we can easily access in our page functions thePDF = pdf; //How many pages it has numPages = pdf.numPages; //Start with first page pdf.getPage( 1 ).then( handlePages ); }); function handlePages(page) { //This gives us the page dimensions at full scale var viewport = page.getViewport( 1 ); //We'll create a canvas for each page to draw it on var canvas = document.createElement( "canvas" ); canvas.style.display = "block"; var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; //Draw it on the canvas page.render({canvasContext: context, viewport: viewport}); //Add it to the web page document.body.appendChild( canvas ); //Move to next page currPage++; if ( thePDF !== null && currPage <= numPages ) { thePDF.getPage( currPage ).then( handlePages ); } } 

Answer 2

Here is my trick. Displays all pages in the correct order and runs asynchronously.

 <style> #pdf-viewer { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); overflow: auto; } .pdf-page-canvas { display: block; margin: 5px auto; border: 1px solid rgba(0, 0, 0, 0.2); } </style> <script> url = 'https://github.com/mozilla/pdf.js/blob/master/test/pdfs/tracemonkey.pdf'; var thePdf = null; var scale = 1; PDFJS.getDocument(url).promise.then(function(pdf) { thePdf = pdf; viewer = document.getElementById('pdf-viewer'); for(page = 1; page <= pdf.numPages; page++) { canvas = document.createElement("canvas"); canvas.className = 'pdf-page-canvas'; viewer.appendChild(canvas); renderPage(page, canvas); } }); function renderPage(pageNumber, canvas) { thePdf.getPage(pageNumber).then(function(page) { viewport = page.getViewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; page.render({canvasContext: canvas.getContext('2d'), viewport: viewport}); }); } </script> <div id='pdf-viewer'></div> 

Answer 3

The pdfjs-dist library contains parts for creating a PDF viewer. You can use PDFPageView to display all pages. Based on https://github.com/mozilla/pdf.js/blob/master/examples/components/pageviewer.html :

 var url = "https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"; var container = document.getElementById('container'); // Load document PDFJS.getDocument(url).then(function (doc) { var promise = Promise.resolve(); for (var i = 0; i < doc.numPages; i++) { // One-by-one load pages promise = promise.then(function (id) { return doc.getPage(id + 1).then(function (pdfPage) { // Add div with page view. var SCALE = 1.0; var pdfPageView = new PDFJS.PDFPageView({ container: container, id: id, scale: SCALE, defaultViewport: pdfPage.getViewport(SCALE), // We can enable text/annotations layers, if needed textLayerFactory: new PDFJS.DefaultTextLayerFactory(), annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory() }); // Associates the actual page with the view, and drawing it pdfPageView.setPdfPage(pdfPage); return pdfPageView.draw(); }); }.bind(null, i)); } return promise; }); 

 #container > *:not(:first-child) { border-top: solid 1px black; } 

 <link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet"/> <script src="https://npmcdn.com/pdfjs-dist/web/compatibility.js"></script> <script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script> <script src="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script> <div id="container" class="pdfViewer singlePageView"></div> 

Answer 4

If you want to display all pages of a pdf document on different canvases, all one at a time synchronously is a kind of solution:

index.html

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PDF Sample</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="pdf.js"></script> <script type="text/javascript" src="main.js"> </script> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body id="body"> </body> </html> 

main.css

 canvas { display: block; } 

main.js

 $(function() { var filePath = "document.pdf"; function Num(num) { var num = num; return function () { return num; } }; function renderPDF(url, canvasContainer, options) { var options = options || { scale: 1.5 }, func, pdfDoc, def = $.Deferred(), promise = $.Deferred().resolve().promise(), width, height, makeRunner = function(func, args) { return function() { return func.call(null, args); }; }; function renderPage(num) { var def = $.Deferred(), currPageNum = new Num(num); pdfDoc.getPage(currPageNum()).then(function(page) { var viewport = page.getViewport(options.scale); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var renderContext = { canvasContext: ctx, viewport: viewport }; if(currPageNum() === 1) { height = viewport.height; width = viewport.width; } canvas.height = height; canvas.width = width; canvasContainer.appendChild(canvas); page.render(renderContext).then(function() { def.resolve(); }); }) return def.promise(); } function renderPages(data) { pdfDoc = data; var pagesCount = pdfDoc.numPages; for (var i = 1; i <= pagesCount; i++) { func = renderPage; promise = promise.then(makeRunner(func, i)); } } PDFJS.disableWorker = true; PDFJS.getDocument(url).then(renderPages); }; var body = document.getElementById("body"); renderPDF(filePath, body); }); 

Answer 5

This code is nothing more than a combination of the 2 answers above, it is working code from PDF.js 1.9. You can just use it as is.

 var url = "https://res.cloudinary.com/duhhfljil/image/upload/v1569677713/sample-multi-page_ogapil.pdf"; var thePdf = null; var scale = 2; PDFJS.getDocument(url).promise.then(function(pdf) { thePdf = pdf; viewer = document.getElementById('pdf-viewer'); for (page = 1; page <= pdf.numPages; page++) { canvas = document.createElement("canvas"); canvas.className = 'pdf-page-canvas'; viewer.appendChild(canvas); renderPage(page, canvas); } }); function renderPage(pageNumber, canvas) { thePdf.getPage(pageNumber).then(function(page) { viewport = page.getViewport(scale); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport }); }); } 

 #pdf-viewer { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); overflow: auto; } .pdf-page-canvas { display: block; margin: 5px auto; border: 1px solid rgba(0, 0, 0, 0.2); width:100%; //optional } 

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Muli:600,700|Roboto&display=swap" rel="stylesheet"> <title>PDF.js with multipage</title> </head> <body> <div id='pdf-viewer'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.9.661/pdf.min.js" integrity="sha256-9OwwWvYMDpFmDm8Tk09cyQnuggV6EGnS0ADUE7E4i/A=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.9.661/pdf_viewer.js" integrity="sha256-qoiyyPF9TKlewkHiUu1wo6lVRH+VXfUEtoxyC7aj3Hg=" crossorigin="anonymous"></script> </body> </html> 

Answer 6

You can link to the link below for a quick workaround.

Note: the developer himself ( Really dirty! It's just a test drive )

https://gist.github.com/fcingolani/3300351#file-index-html

Answer 7

If you want to display all pages of a PDF document on different canvases

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="pdf.js"></script> <script src="jquery.js"></script> </head> <body> <h1>PDF.js 'Hello, world!' example</h1> <div id="canvas_div"></div> <body> <script> // If absolute URL from the remote server is provided, configure the CORS // header on that server. var url = 'pdff.pdf'; // Loaded via <script> tag, create shortcut to access PDF.js exports. var pdfjsLib = window['pdfjs-dist/build/pdf']; // The workerSrc property shall be specified. pdfjsLib.GlobalWorkerOptions.workerSrc = 'worker.js'; var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { var __TOTAL_PAGES = pdf.numPages; // Fetch the first page var pageNumber = 1; for( let i=1; i<=__TOTAL_PAGES; i+=1){ var id ='the-canvas'+i; $('#canvas_div').append("<div style='background-color:gray;text-align: center;padding:20px;' ><canvas calss='the-canvas' id='"+id+"'></canvas></div>"); var canvas = document.getElementById(id); //var pageNumber = 1; renderPage(canvas, pdf, pageNumber++, function pageRenderingComplete() { if (pageNumber > pdf.numPages) { return; } // Continue rendering of the next page renderPage(canvas, pdf, pageNumber++, pageRenderingComplete); }); } }); function renderPage(canvas, pdf, pageNumber, callback) { pdf.getPage(pageNumber).then(function(page) { var scale = 1.5; var viewport = page.getViewport({scale: scale}); var pageDisplayWidth = viewport.width; var pageDisplayHeight = viewport.height; //var pageDivHolder = document.createElement(); // Prepare canvas using PDF page dimensions //var canvas = document.createElement(id); var context = canvas.getContext('2d'); canvas.width = pageDisplayWidth; canvas.height = pageDisplayHeight; // pageDivHolder.appendChild(canvas); // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(callback); }); } </script> <html> 

Answer 8

The following answer is a partial answer , intended for anyone trying to get PDF.js to display the entire PDF in 2019, as the API has changed significantly. This, of course, was the primary goal of the OP. sample code for inspiration

Please note the following:

• additional libraries are used - Lodash (for the range () function) and polyfills (for promises) ....
• Bootstrap used

  <div class="row"> <div class="col-md-10 col-md-offset-1"> <div id="wrapper"> </div> </div> </div> <style> body { background-color: #808080; /* margin: 0; padding: 0; */ } </style> <link href="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf_viewer.js"></script> <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script> <script> $(document).ready(function () { // startup }); 'use strict'; if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) { alert("Please build the pdfjs-dist library using\n" + " 'gulp dist-install'"); } var url = '//www.pdf995.com/samples/pdf.pdf'; pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.js'; var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { // please be aware this uses .range() function from lodash var pagePromises = _.range(1, pdf.numPages).map(function(number) { return pdf.getPage(number); }); return Promise.all(pagePromises); }).then(function(pages) { var scale = 1.5; var canvases = pages.forEach(function(page) { var viewport = page.getViewport({ scale: scale, }); // Prepare canvas using PDF page dimensions var canvas = document.createElement('canvas'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var canvasContext = canvas.getContext('2d'); var renderContext = { canvasContext: canvasContext, viewport: viewport }; page.render(renderContext).promise.then(function() { if (false) return console.log('Page rendered'); }); document.getElementById('wrapper').appendChild(canvas); }); }, function(error) { return console.log('Error', error); }); </script>