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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.