31:T172d,pdfView = async (url, opts) => { const options = Object.assign( {}, { startPage: 1, scale: 1, backgroundColor: "#f4f4f4", fontColor: "#6e6e6e", zoomStep: 0.25, minScale: 0.5, maxScale: 3 }, opts ); const { startPage } = options; let rootEl; let prevButton, nextButton, zoomInButton, zoomOutButton, downloadButton; let currentPage = startPage || 1; let scale = options.scale; const uid = initializeStyles(options); const ns = uid.id; // --- Charger le PDF const pdfDoc = await pdfjsLib.getDocument(url).promise; const totalPages = pdfDoc.numPages; // --- Créer les éléments const canvas = html`

`; const innerWrapper = html`

${canvas}

`; const outerWrapper = html`

${innerWrapper}

`; const pagePicker = pagePickerInput(currentPage, totalPages); // --- Rendu PDF initial async function renderCurrentPage() { return renderPageToCanvas(canvas, pdfDoc, currentPage, { ...options, scale: 1 }); } async function showPage(num) { if (num >= 1 && num <= totalPages) { currentPage = num; await renderCurrentPage(); updateUI(); } } function showNextPage() { showPage(Math.min(currentPage + 1, totalPages)); } function showPreviousPage() { showPage(Math.max(currentPage - 1, 1)); } // --- 🔍 Zoom visuel (sur le wrapper interne) function updateUI() { pagePicker.value = currentPage; prevButton[0].disabled = currentPage <= 1; nextButton[0].disabled = currentPage >= totalPages; zoomDisplay.textContent = `${Math.round(scale * 100)}%`; innerWrapper.style.transform = `scale(${scale})`; innerWrapper.style.transition = "transform 0.25s ease-out"; } function zoomIn() { scale = Math.min(scale + options.zoomStep, options.maxScale); updateUI(); } function zoomOut() { scale = Math.max(scale - options.zoomStep, options.minScale); updateUI(); } // --- Pagination handler const pageChangeHandler = (e) => { const nextPage = +e.currentTarget.value; showPage(nextPage); }; pagePicker.addEventListener("change", pageChangeHandler); invalidation.then(() => pagePicker.removeEventListener("change", pageChangeHandler) ); // --- Boutons prevButton = Inputs.button("Previous", { reduce: () => showPreviousPage() }); nextButton = Inputs.button("Next", { reduce: () => showNextPage() }); zoomInButton = Inputs.button("Zoom +", { reduce: () => zoomIn() }); zoomOutButton = Inputs.button("Zoom –", { reduce: () => zoomOut() }); // --- 🧩 Bouton de téléchargement downloadButton = Inputs.button("Download PDF", { reduce: () => { const a = document.createElement("a"); a.href = url; a.download = url.split("/").pop() || "document.pdf"; a.target = "_blank"; a.rel = "noopener"; a.click(); } }); const zoomDisplay = html`${Math.round( scale * 100 )}%`; // --- Rendu initial await renderCurrentPage(); updateUI(); // --- Barre de pagination, zoom et téléchargement const paginationEl = totalPages > 1 ? html`

${prevButton} ${nextButton} ${zoomOutButton} ${zoomInButton} ${zoomDisplay}

${pagePicker} of ${totalPages} ${downloadButton}

` : null; // --- 🖱️ Déplacement à la souris (pan) let isPanning = false; let startX, startY, scrollLeft, scrollTop; outerWrapper.addEventListener("mousedown", (e) => { isPanning = true; startX = e.pageX - outerWrapper.offsetLeft; startY = e.pageY - outerWrapper.offsetTop; scrollLeft = outerWrapper.scrollLeft; scrollTop = outerWrapper.scrollTop; outerWrapper.style.cursor = "grabbing"; }); outerWrapper.addEventListener("mouseleave", () => { isPanning = false; outerWrapper.style.cursor = "default"; }); outerWrapper.addEventListener("mouseup", () => { isPanning = false; outerWrapper.style.cursor = "default"; }); outerWrapper.addEventListener("mousemove", (e) => { if (!isPanning) return; e.preventDefault(); const x = e.pageX - outerWrapper.offsetLeft; const y = e.pageY - outerWrapper.offsetTop; const walkX = x - startX; const walkY = y - startY; outerWrapper.scrollLeft = scrollLeft - walkX; outerWrapper.scrollTop = scrollTop - walkY; }); // --- 🎚️ Zoom avec Ctrl + molette (centré sur le pointeur) outerWrapper.addEventListener( "wheel", (e) => { if (e.ctrlKey || e.metaKey) { e.preventDefault(); const rect = outerWrapper.getBoundingClientRect(); const mouseX = e.clientX - rect.left + outerWrapper.scrollLeft; const mouseY = e.clientY - rect.top + outerWrapper.scrollTop; const zoomFactor = e.deltaY < 0 ? 1 + options.zoomStep : 1 - options.zoomStep; const prevScale = scale; scale = Math.min(Math.max(scale * zoomFactor, options.minScale), options.maxScale); const scaleRatio = scale / prevScale; outerWrapper.scrollLeft = mouseX * scaleRatio - (e.clientX - rect.left); outerWrapper.scrollTop = mouseY * scaleRatio - (e.clientY - rect.top); updateUI(); } }, { passive: false } ); // --- Structure finale rootEl = html`

${outerWrapper} ${paginationEl}

`; return rootEl; }; 32: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; }33:[{"id":"0351c17439eb5a92583d0bf4370a5244bedd1b0c81c49208d593fcf0b1a9c25f96c809989246b68021989ced7c32d7f9725695bd5bf4307728978d727cc189e2","href":"https://static.observableusercontent.com/files/0351c17439eb5a92583d0bf4370a5244bedd1b0c81c49208d593fcf0b1a9c25f96c809989246b68021989ced7c32d7f9725695bd5bf4307728978d727cc189e2","name":"sample.pdf","type":"application/pdf","lastModified":1762093677202.88,"size":9439},{"id":"0cef841c19d9bb13199b8714ecce96ae65ff6c9d6acfd82e455929073798ea867f6ddedf8743bfbe1cedd413b93ceed854ca6dc67ae3ae031d8999d7f5e23fe0","href":"https://static.observableusercontent.com/files/0cef841c19d9bb13199b8714ecce96ae65ff6c9d6acfd82e455929073798ea867f6ddedf8743bfbe1cedd413b93ceed854ca6dc67ae3ae031d8999d7f5e23fe0","name":"sample-single-page.pdf","type":"application/pdf","lastModified":1762093677202.88,"size":64210}] 2f:{"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 \"@linogaliana/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":"$31","pinned":false,"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":"$32","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- 2025-11-02: @linogaliana Adding scrolling features to improve UX\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":"$W33","stdlib":"1","titling":"auto"}