2d:null 2e:["$","title",null,{"children":"PDF Utilities | Tanner Hobson | Observable"}] 33:T1267,{ return htl.html`

PDF Utilities

This notebook includes some reusable code for processing PDF documents in an opcode-centric way. The core idea behind this is that PDF documents are internally a kind of virtual machine that encodes drawing instructions. For example, a PDF includes opcodes such as moveTo, lineTo, and stroke. Anyone familiar with the CanvasRenderingContext2D should be familiar enough with the PDF opcodes.

For my use cases, it makes sense to refer to these PDF opcodes in 3 distinct but equivalent ways. First, as its internal representation of a numeric function identifier (fn). Second, as its human readable operation name (op). Third, as a shortened single-character name (ch). Some examples of these are as follows:

${OP2SUMMARY("moveTo")} ${OP2SUMMARY("lineTo")} ${OP2SUMMARY("stroke")}

`fn`	`op`	`ch`

Usage

The main result of this notebook is the PDF class. This class exposes a static constructor PDF.load() which loads and then preprocesses the PDF before returning an instance of the PDF class.

To import this code into your notebook, use:

import { PDF } from '@player1537/pdf-utilities';

The API for the PDF.load function is as follows.

class PDF {
  static load(whatDocument, options) {}
}

Here, whatDocument gives a specification for what document to load using PDF.js. As a result, anything that PDF.js's getDocument function supports is supported by PDF.load, which includes: a URL, a Uint8Array of PDF data, or some other internal data types.

In an Observable notebook, the simplest use case is as follows.

const pdf = await PDF.load(await FileAttachment("my.pdf").url());

This is equivalent to the slightly longer usage:

const pdf = await PDF.load(await FileAttachment("my.pdf").url(), {
  page: 1,
  wants: ['ops', 'fns', 'chs', 'args'],
});

To do further processing on the PDF, the wants array can also include 'doc' and 'page'.

Example

I've included an example of a PDF map from the Great Smoky Mountain National Parks. This map includes trails and rivers and is mostly a collection of moveTo, lineTo, and stroke opcodes. The resulting map looks like this: ${EMBEDPDF(example)}

The PDF class generated by this notebook for this PDF is as follows. ${inspect(example)}

All Opcodes

To serve as a complete reference, all opcodes, their fn, op, and ch values are listed below. Three separate tables are provided depending on what sorting order is preferred.

Ordered by fn

${SORTED(PDF.opcodes, ({ fn: a }, { fn: b }) => a - b).map(({ op }) => OP2SUMMARY(op))}

`fn`	`op`	`ch`

Ordered by op

${SORTED(PDF.opcodes, ({ op: a }, { op: b }) => a.localeCompare(b)).map(({ op }) => OP2SUMMARY(op))}

`fn`	`op`	`ch`

Ordered by ch

${SORTED(PDF.opcodes, ({ ch: a }, { ch: b }) => a.localeCompare(b)).map(({ op }) => OP2SUMMARY(op))}

`fn`	`op`	`ch`

`; // return htl.html function OP2SUMMARY(op) { const ch = PDF.op2ch(op); const fn = PDF.op2fn(op); return htl.html.fragment` ${fn} ${op} ${ch} `; // return htl.html.fragment } function SORTED(arr, cmp) { arr = [...arr]; arr.sort(cmp); return arr; } function EMBEDPDF(pdf) { const scale = width / pdf.page.getViewport({scale: 1}).width; const viewport = pdf.page.getViewport({scale}); const context = DOM.context2d(viewport.width, viewport.height); context.canvas.style.border = "solid 1px #ccc"; pdf.page.render({canvasContext: context, viewport}); return htl.html.fragment` ${context.canvas} `; // return htl.html.fragment } }34:Te8c,class PDF { constructor({ fns, args, ops=false, chs=false, ...rest }) { this.fns = fns; this.args = args; if (ops === true) { this.ops = Array.from(this.fns).map((fn) => PDF.fn2op(fn)); } else if (ops !== false) { this.ops = ops; } if (chs === true) { let chs = ''; for (const fn of this.fns) { const ch = PDF.fn2ch(fn); chs = chs.concat(ch); } this.chs = chs; } else if (chs !== false) { this.chs = chs; } Object.assign(this, rest); } static async load(url, { page=1, want=['ops', 'chs', 'fns', 'args'] }={}) { const pdfDoc = await pdfjsLib.getDocument(url).promise; const pdfPage = await pdfDoc.getPage(page); const pdfList = await pdfPage.getOperatorList(); const parts = {}; if (want.includes('doc')) { parts.doc = pdfDoc; } if (want.includes('page')) { parts.page = pdfPage; } if (want.includes('ops')) { parts.ops = true; } if (want.includes('chs')) { parts.chs = true; } if (want.includes('fns')) { parts.fns = new Uint8Array(pdfList.fnArray); } if (want.includes('args')) { parts.args = pdfList.argsArray; } return new PDF(parts); } static alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!"#$%&\'()*+,-./:;<=>?@[]^_`{|}~'; static #opcodes = null; static get opcodes() { if (this.#opcodes === null) { const ops = Object.entries(pdfjsLib.OPS); ops.sort((a, b) => a[1] - b[1]); if (ops[0][1] >= ops[1][1]) throw 'should be sorted correctly'; const opcodes = []; for (const [op, fn] of ops) { const ch = this.alphabet.at(fn); if (ch === undefined) throw 'alphabet too small'; opcodes.push({ op, fn, ch }); } opcodes.push({ op: 'noop', fn: 0, ch: ' ' }); this.#opcodes = opcodes; } return this.#opcodes; } //--- Generated code begins. static #OPS = null; static OPS() { if (this.#OPS === null) { this.#OPS = this.opcodes.map(({ op }) => op); } return this.#OPS; } static #FNS = null; static FNS() { if (this.#FNS === null) { this.#FNS = this.opcodes.map(({ fn }) => fn); } return this.#FNS; } static #CHS = null; static CHS() { if (this.#CHS === null) { this.#CHS = this.opcodes.map(({ ch }) => ch); } return this.#CHS; } //--- Generated code ends. //--- Generated code begins. static #fn2op = null; static fn2op(fn) { if (this.#fn2op === null) { this.#fn2op = new Map(this.opcodes.map(({ fn, op }) => [fn, op])); } return this.#fn2op.get(fn); } static #op2fn = null; static op2fn(op) { if (this.#op2fn === null) { this.#op2fn = new Map(this.opcodes.map(({ op, fn }) => [op, fn])); } return this.#op2fn.get(op); } static #fn2ch = null; static fn2ch(fn) { if (this.#fn2ch === null) { this.#fn2ch = new Map(this.opcodes.map(({ fn, ch }) => [fn, ch])); } return this.#fn2ch.get(fn); } static #ch2fn = null; static ch2fn(ch) { if (this.#ch2fn === null) { this.#ch2fn = new Map(this.opcodes.map(({ ch, fn }) => [ch, fn])); } return this.#ch2fn.get(ch); } static #op2ch = null; static op2ch(op) { if (this.#op2ch === null) { this.#op2ch = new Map(this.opcodes.map(({ op, ch }) => [op, ch])); } return this.#op2ch.get(op); } static #ch2op = null; static ch2op(ch) { if (this.#ch2op === null) { this.#ch2op = new Map(this.opcodes.map(({ ch, op }) => [ch, op])); } return this.#ch2op.get(ch); } //--- Generated code ends. }35:[{"id":"5aa7e331fca100cea75cba25c7162710ee3ce31518126ed90f62a9f40e89f4e7bdc65ed1967fffee310d2ec682c61778485a1c60fd53702c50c15a7c3c6754b1","href":"https://static.observableusercontent.com/files/5aa7e331fca100cea75cba25c7162710ee3ce31518126ed90f62a9f40e89f4e7bdc65ed1967fffee310d2ec682c61778485a1c60fd53702c50c15a7c3c6754b1","name":"pdf.js","type":"application/javascript","lastModified":1662478388962.145,"size":515603},{"id":"eff45ac5935d35b0f1c47eddfc440037f9a524380a29c11274bdc267f17df37ffb572b9a74cf1dc7ef1176d2a447e788320477188824a889cdf17266149bf18e","href":"https://static.observableusercontent.com/files/eff45ac5935d35b0f1c47eddfc440037f9a524380a29c11274bdc267f17df37ffb572b9a74cf1dc7ef1176d2a447e788320477188824a889cdf17266149bf18e","name":"pdf.worker.js","type":"application/javascript","lastModified":1662478390459.019,"size":1966101},{"id":"98d092e1314077e41a1a6dcfe3099e50c8ed4f0160d4299c927b1c3ff5e39eef37945f230a995af3d138f82baf4e35fb6aa6d51cab484afb2a7f81d19f7dc688","href":"https://static.observableusercontent.com/files/98d092e1314077e41a1a6dcfe3099e50c8ed4f0160d4299c927b1c3ff5e39eef37945f230a995af3d138f82baf4e35fb6aa6d51cab484afb2a7f81d19f7dc688","name":"parkmap.pdf","type":"application/pdf","lastModified":1662481074290.155,"size":1261344}] 31:{"id":"f1caeaaa8abe04de","slug":"pdf-utilities","title":"PDF Utilities","thumbnail":"5b03555fd6a7992359395358b078a013093cf811b76c484c3411a165cb9cd8d6","access_level":"public","create_time":"$D2022-09-06T15:32:16.122Z","update_time":"$D2022-09-06T19:02:33.107Z","view_time":null,"first_public_time":"$D2023-04-10T02:01:42.740Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7343f790779e6735","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":"starter_2024"},"version":88,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0a627f6b6f3beb0","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":null}],"members":[{"type":"individual","id":"e0a627f6b6f3beb0","login":"player1537","name":"Tanner Hobson","avatar_url":"https://avatars-next.observableusercontent.com/16170a1a32e364e1ff6054c6045de6814a032d01331aba01288f82afceeaaec2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d21bf020f9cae8af","slug":"work-in-progress-promising","title":"Work-in-Progress (promising)","owner":{"id":"7343f790779e6735","login":"player1537","name":"Tanner Hobson"}},"type":"notebook","body":{"title":"PDF Utilities","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"example = {\n const pdf = PDF.load(await FileAttachment(\"parkmap.pdf\").url(), {\n want: ['doc', 'page', 'fns', 'ops', 'chs', 'args'],\n });\n return pdf;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"pdfjsLib = {\n const pdfjsLib = await require(await FileAttachment(\"pdf.js\").url());\n pdfjsLib.GlobalWorkerOptions.workerSrc = await FileAttachment(\"pdf.worker.js\").url();\n return pdfjsLib;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"{\n return htl.html`\n

\n  //--- Generated code begins.\n${GENERATE(\"op\")}\n${GENERATE(\"fn\")}\n${GENERATE(\"ch\")}\n\n  //--- Generated code ends.\n`; // return\n\n  function GENERATE(what) {\n    const name = `${what}s`.toUpperCase();\n    return htl.html.fragment`\n  static #${name} = null;\n  static ${name}() {\n    if (this.#${name} === null) {\n      this.#${name} = this.opcodes.map(({ ${what} }) => ${what});\n    }\n    return this.#${name};\n  }`; // return\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"{\n  return htl.html`\n\n  //--- Generated code begins.\n${GENERATE(\"fn\", \"op\")}\n${GENERATE(\"op\", \"fn\")}\n${GENERATE(\"fn\", \"ch\")}\n${GENERATE(\"ch\", \"fn\")}\n${GENERATE(\"op\", \"ch\")}\n${GENERATE(\"ch\", \"op\")}\n\n  //--- Generated code ends.\n\n  `; // return\n\n  function GENERATE(fromWhat, toWhat) {\n    const name = `${fromWhat}2${toWhat}`;\n    return htl.html.fragment`\n  static #${name} = null;\n  static ${name}(${fromWhat}) {\n    if (this.#${name} === null) {\n      this.#${name} = new Map(this.opcodes.map(({ ${fromWhat}, ${toWhat} }) => [${fromWhat}, ${toWhat}]));\n    }\n    return this.#${name}.get(${fromWhat});\n  }`; // return;\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {inspect} from \"@observablehq/inspector\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}}
32:"$31:body"