Published
Edited
Apr 30, 2020
Importers
13 stars
Insert cell
Insert cell
url = FileAttachment("sample.pdf").url()
Insert cell
view = {
const container = html`<div><div class="pdfViewer"></div>`;
const eventBus = new pdfjs.EventBus();
const linkService = new pdfjs.PDFLinkService({eventBus});
const viewer = new pdfjs.PDFViewer({container, eventBus, linkService});
const document = await pdfjs.getDocument(url).promise;
viewer.setDocument(document);
linkService.setViewer(viewer);
linkService.setDocument(document, null);
eventBus.on("pagesinit", () => viewer.currentScaleValue = "page-width");
return container;
}
Insert cell
pdfjs = {
const [pdfjs, workerSrc, viewerStyle] = await Promise.all([
require("pdfjs-dist@2"),
require.resolve("pdfjs-dist@2/build/pdf.worker.js"),
require.resolve("pdfjs-dist@2/web/pdf_viewer.css")
]);

// Fix the worker (it requires an absolute URL).
pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;

// Fix the AMD bundle (it requires a global).
window["pdfjs-dist/build/pdf"] = pdfjs;
Object.assign(pdfjs, await require("pdfjs-dist@2/web/pdf_viewer.js"));
delete window["pdfjs-dist/build/pdf"];

// Fix the viewer (it requires global styles).
// And remove a few of the hideous defaults…
const link = document.head.appendChild(html`<style>
@import url("${viewerStyle}");

.pdfViewer {
overflow: hidden;
margin-bottom: -1em;
}

.pdfViewer .page {
border: solid 1px #ccc;
margin-bottom: 1em;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
opacity: initial;
background: initial;
box-shadow: initial;
}

</style>`);
invalidation.then(() => link.remove());

return pdfjs;
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more