2c:null 2d:["$","title",null,{"children":"PDF View | Saneef H. Ansari | Observable"}] 32:Taee,pdfView = async (url, opts) => { const options = Object.assign( {}, { startPage: 1, scale: 1, backgroundColor: "#f4f4f4", fontColor: "#6e6e6e" }, 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; }33:T457,initializeStyles = (options) => { let initialized; const uid = DOM.uid("pdfView"); const ns = uid.id; if (initialized) return uid; initialized = true; const { backgroundColor, fontColor } = options; const inputsNs = Inputs.text().classList[0]; const styles = html``; document.querySelector("head").append(styles); invalidation.then( () => styles.parentNode && styles.parentNode.removeChild(styles) ); return uid; }34:[{"id":"0351c17439eb5a92583d0bf4370a5244bedd1b0c81c49208d593fcf0b1a9c25f96c809989246b68021989ced7c32d7f9725695bd5bf4307728978d727cc189e2","href":"https://static.observableusercontent.com/files/0351c17439eb5a92583d0bf4370a5244bedd1b0c81c49208d593fcf0b1a9c25f96c809989246b68021989ced7c32d7f9725695bd5bf4307728978d727cc189e2","name":"sample.pdf","type":"application/pdf","lastModified":1636702239612.012,"size":9439},{"id":"0cef841c19d9bb13199b8714ecce96ae65ff6c9d6acfd82e455929073798ea867f6ddedf8743bfbe1cedd413b93ceed854ca6dc67ae3ae031d8999d7f5e23fe0","href":"https://static.observableusercontent.com/files/0cef841c19d9bb13199b8714ecce96ae65ff6c9d6acfd82e455929073798ea867f6ddedf8743bfbe1cedd413b93ceed854ca6dc67ae3ae031d8999d7f5e23fe0","name":"sample-single-page.pdf","type":"application/pdf","lastModified":1659981431055.767,"size":64210}] 30:{"id":"99b48a9c1a4bb24c","slug":"pdf-view","title":"PDF View","thumbnail":"ccec400b2a3662a70ee3d144d4b2456092af782df152859d72e3d41952895a7a","access_level":"public","create_time":"$D2021-11-12T03:55:03.554Z","update_time":"$D2023-02-19T20:35:16.616Z","view_time":null,"first_public_time":"$D2021-11-12T14:11:14.844Z","fork":{"id":"651f939d55e90c1e","slug":"pdf-js-multipage-previous-next-example","title":"PDF.js MultiPage Previous/Next","owner":{"id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis"}},"stars":13,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":674,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[{"id":"a872f74624444ac0","reply_to_id":null,"content":"Here's a challenge: Transform the starting page number into an input :)","create_time":"$D2021-12-20T19:48:24.848Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"5115ee38fc57cd06","reply_to_id":"a872f74624444ac0","content":"You mean, input to jump directly to a page number?","create_time":"$D2021-12-21T07:55:49.311Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}},{"id":"1707c83a593afd00","reply_to_id":"a872f74624444ac0","content":"Yep. :)","create_time":"$D2021-12-21T15:24:03.983Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}},{"id":"c0a8394acc2eabcb","reply_to_id":"a872f74624444ac0","content":"I have added `${options}`;\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"renderPageToCanvas = async (canvas, pdf, pageNum, options) => {\n const { scale } = options;\n const ctx = canvas.getContext(\"2d\");\n\n const page = await pdf.getPage(pageNum);\n const viewport = page.getViewport({ scale: scale * dpr });\n canvas.height = viewport.height;\n canvas.width = viewport.width;\n\n await page.render({\n canvasContext: ctx,\n viewport\n });\n\n return {\n height: viewport.height,\n width: viewport.width\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"dpr = window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":603,"value":"## Changelog\n\n- 2022-08-08: Hide pagination if the PDF file only has one page.\n- 2023-02-19: New Options, `background` and `color` to change background and\n font colors respectively.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":330,"value":"## Credits\n\n- This notebook is based on [Aaron’s](https://observablehq.com/@aaronkyle)\n [PDF.js MultiPage Previous/Next](https://observablehq.com/@aaronkyle/pdf-js-multipage-previous-next-example)\n and [Fabian’s](https://observablehq.com/@mootari)\n [Hello PDF.js](https://observablehq.com/@mootari/hello-pdf-js)!\n- Thanks to [Martien van Steenbergen](https://observablehq.com/@martien) for adding\n feature to change colors.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":176,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":87,"value":"pdfjsLib = {\n const lib = await require(\"https://unpkg.com/pdfjs-dist@2.10.377/build/pdf.min.js\");\n lib.GlobalWorkerOptions.workerSrc =\n \"https://unpkg.com/pdfjs-dist@2.10.377/build/pdf.worker.min.js\";\n return lib;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":618,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":624,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"