30: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; }31: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; }32:[{"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}] 2e:{"title":"PDF View","cells":[{"id":0,"value":"# PDF View","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"toc({\n headers: \"h2,h3,h4,h5\",\n hideStartingFrom: \"Imports\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"PDF View allows you to embed PDF files in Observable notebooks.\n\nIt uses Mozilla’s [PDF.js](https://github.com/mozilla/pdf.js) to render PDF files using HTML Canvas.\n\n## Usage\n\nImport PDF View:\n\n~~~js\nimport {pdfView} from \"@saneef/pdf-view\"\n~~~\n\n...and, within any cell call `pdfView()` with URL to the PDF file:\n\n~~~js\npdfView(\"\")\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"pdfView(\n \"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"### Options\n\nYou can pass options as second argument in `pdfView()`.\n\n```js\npdfView(\"\", {\n // Sets the scale level of the PDF viewer.\n scale: 1, // (default: 1)\n // Page to show in the beginning.\n startPage: 1, // (default: 1),\n // Change background/frame color\n background: \"#f4f4f4\", // (Default: \"#f4f4f4\")\n // Change font color\n color: \"#6e6e6e\" // (Default: \"#6e6e6e\")\n})\n```\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"### Changing colors","pinned":false,"hidden":false,"mode":"md"},{"id":648,"value":"pdfView(await FileAttachment(\"sample.pdf\").url(), {\n backgroundColor: \"#776EA7\",\n fontColor: \"#BDC6FF\",\n\n scale: 0.5\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"### Embedding PDF file attachments\n\n~~~js\npdfView(await FileAttachment(\"sample.pdf\").url())\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"pdfView(await FileAttachment(\"sample.pdf\").url(), {\n scale: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"pdfView(await FileAttachment(\"sample-single-page.pdf\").url(), {\n scale: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"pagePickerInput = (startPage, pages) => {\n const options = Array.from({ length: pages }).map((_, i) => {\n const index = i + 1;\n return html``;\n });\n\n const input = html``;\n return input;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":452,"value":"dpr = window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":176,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":163,"value":"html = htl.html","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}