using mozilla PDFJS how to show all pages not a single

Question

Please Help, I tried Lots of solution to show all pages one by one but I get different error , so now I'm using demo code of pdfjs and its work for one page , can anyone know how to display it all pages.

I tried this solution but not work for me How to display whole PDF (not only one page) with PDF.JS?

 // If absolute URL from the remote server is provided, configure the CORS // header on that server. var url = 'demo.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 = '//mozilla.github.io/pdf.js/build/pdf.worker.js'; // Asynchronous download of PDF var loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then(function(pdf) { console.log('PDF loaded'); // Fetch the first page var pageNumber = 1; pdf.getPage(pageNumber).then(function(page) { console.log('Page loaded'); var scale = 1.5; var viewport = page.getViewport({scale: scale}); // Prepare canvas using PDF page dimensions var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // Render PDF page into canvas context var renderContext = { canvasContext: context, viewport: viewport }; var renderTask = page.render(renderContext); renderTask.promise.then(function () { console.log('Page rendered'); }); }); }, function (reason) { // PDF loading error console.error(reason); });

 <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script> <canvas id="the-canvas"></canvas>

Answer 1

 function renderPDF(url, canvasContainer, options) { options = options || { scale: 1 }; function renderPage(page) { var viewport = page.getViewport(options.scale); var wrapper = document.createElement("div"); wrapper.className = "canvas-wrapper"; var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var renderContext = { canvasContext: ctx, viewport: viewport }; canvas.height = viewport.height; canvas.width = viewport.width; wrapper.appendChild(canvas) canvasContainer.appendChild(wrapper); page.render(renderContext); } function renderPages(pdfDoc) { for(var num = 1; num <= pdfDoc.numPages; num++) pdfDoc.getPage(num).then(renderPage); } PDFJS.disableWorker = true; PDFJS.getDocument(url).then(renderPages); } renderPDF('https://res.cloudinary.com/sivadass/image/upload/v1519136548/hr-sample-pdf.pdf', document.getElementById('holder'));

 #holder{ background: #eee; padding: 32px 0 16px 0; }.canvas-wrapper{ margin-bottom: 16px; } canvas{ margin: 0 auto; display: block; } **I hope, it will help you!**

 <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.385/build/pdf.min.js"></script> <div id="holder"></div>