pdfView = async (url, opts) => { const options = Object.assign({}, defaultOptions, opts); const { startPage } = options; let rootEl; let prevButton; let nextButton; let currentPage = startPage || 1; let renderWidth; const uid = initializeStyles(options); const ns = uid.id; // Download PDF const pdfDoc = await pdfjsLib.getDocument(url).promise; const totalPages = pdfDoc.numPages; // Initialise canvas and context const canvas = html`

`; const pagePicker = pagePickerInput(currentPage, totalPages); // Scale width based on the device pixel ratio function scaleWidth(width) { return Math.floor(width / dpr); } function updateUI(width) { pagePicker.value = currentPage; if (rootEl && width) { rootEl.style.maxWidth = `${scaleWidth(width)}px`; } if (currentPage <= 1) { prevButton[0].disabled = true; } else { prevButton[0].disabled = false; } if (currentPage >= totalPages) { nextButton[0].disabled = true; } else { nextButton[0].disabled = false; } } async function renderCurrentPage() { return renderPageToCanvas(canvas, pdfDoc, currentPage, options); } async function showPage(num) { if (num >= 1 && num <= totalPages) { currentPage = num; const { width } = await renderCurrentPage(); updateUI(width); } } function showNextPage() { const nextPage = currentPage + 1 > totalPages ? currentPage : currentPage + 1; showPage(nextPage); } function showPreviousPage() { const nextPage = currentPage - 1 < 1 ? currentPage : currentPage - 1; showPage(nextPage); } const pageChangeHander = (e) => { const target = e.currentTarget; const nextPage = +target.value; showPage(nextPage); }; pagePicker.addEventListener("change", pageChangeHander); invalidation.then(() => pagePicker.removeEventListener("change", pageChangeHander) ); prevButton = Inputs.button("Previous", { reduce: () => showPreviousPage() }); nextButton = Inputs.button("Next", { reduce: () => showNextPage() }); const { width } = await renderCurrentPage(); updateUI(); const paginationEl = totalPages > 1 ? html`

${prevButton}

${nextButton}

${pagePicker} of ${totalPages}

` : null; rootEl = html`

${canvas}

${paginationEl}

`; return rootEl; }