Live programming @ University of Washington
Published
Edited
Sep 27, 2021
1 fork
1 star
view = { // copied from https://observablehq.com/@mbostock/hello-pdf-js-pdfpageview
const container = html`<div style="overflow-y: auto; height: 1200px"><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;
}
key_fn = fn => (a, b) => fn(a) - fn(b)
merged = {
const output = await PDFDocument.create()
const pages = await Promise.all([...files].sort(key_fn(f => order.indexOf(f.name))).map(async f => await PDFDocument.load(await f.arrayBuffer())))
await Promise.all(pages.reverse().map(async (p,i) => {
const subpages = await output.copyPages(p, p.getPages().map((_, i) => i))
subpages.reverse().map(subp => output.insertPage(0, subp))
}))
return output
}
url = { // (copied)
// Generate a blob representing the rendered PDF
//embed; // make sure image is in it first
const file = new Blob([await merged.save()], {
type: "application/pdf"
});
return URL.createObjectURL(file);
}
PDFDocument = (await require('pdf-lib@1.16.0/dist/pdf-lib.min.js')).PDFDocument
import {fileuploader} from '@fil/fileuploader'
pdfjs = { // (copied)
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;
}
import {selectOrder} from '@mariodelgadosr/data-driven-table-column-selection-and-sorting'
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.
