pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`; class PdfLoader { currPage = 1; numPages = -1; doc = null; constructor($container) { this.$container = $container; } load(path) { // reset when using more than once this.currPage = 1; this.promise = new Promise(resolve => this.promiseResolve = resolve); this.$container.innerHTML = ""; pdfjsLib.getDocument(path).promise.then(pdf => { this.doc = pdf; this.numPages = pdf.numPages; pdf.getPage(1).then(this._handlePage.bind(this)); }); return this; } _handlePage(page) { let viewport = page.getViewport({scale: 1}); const scale = this.$container.clientWidth/viewport.width; // const outputScale = window.devicePixelRatio || 1; const outputScale = 1; viewport = page.getViewport({scale}); const cnv = document.createElement("canvas"); const ctx = cnv.getContext("2d"); const width = Math.floor(viewport.width); const height = Math.floor(viewport.height); cnv.width = Math.floor(width * outputScale); cnv.height = Math.floor(height * outputScale); cnv.style.width = `${width}px`; cnv.style.height = `${height}px`; const transform = (outputScale !== 1) ? [outputScale, 0, 0, outputScale, 0, 0] : null; page.render({ canvasContext: ctx, transform: transform, viewport: viewport, }); this.$container.appendChild(cnv); this.currPage++; if (this.doc !== null && this.currPage <= this.numPages) { this.doc.getPage(this.currPage).then(this._handlePage.bind(this)); } else { this.promiseResolve(); } } } const $pages = document.getElementById("pages"); const pdfLoader = new PdfLoader($pages); pdfLoader.load("extendedReport.pdf").promise .then(initReport); let arrow = null; function initReport() { // my other stuff }