PDFjsの型定義ファイル
JSDocから生成しようともしたが、esmblyなどを使ってもうまくいかなかった 仕方ないので手作業で作ることにする
半自動化して作った
2022-04-07
22:00:17 renderingまでしてみる
code:js
await (async () => {
await new Promise((t,o)=>{const e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.min.js",e.addEventListener("load",()=>t()),e.addEventListener("error",o),document.body.append(e)}),window.pdfjsLib.GlobalWorkerOptions.workerSrc="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.13.216/pdf.worker.min.js";const file=await new Promise((t,o)=>{const e=document.createElement("input");e.type="file",e.accept="application/pdf,.pdf",e.addEventListener("change",()=>{t(e.files?.0??void 0)}),e.addEventListener("error",o),document.body.append(e),e.click(),e.remove()});if(file){const t=new Uint8Array(await file.arrayBuffer()),o=Array.prototype.getIndexByTitleLc;delete Array.prototype.getIndexByTitleLc;try{const e=await window.pdfjsLib.getDocument({data:t,cMapUrl:"https://storage.googleapis.com/chrono-lexica/ci7lus-assets/pdfjs/cmaps/",cMapPacked:!0}).promise,l=await e.getMetadata();console.log(l);for(let r=1;r<=e.numPages;r++){const c=await e.getPage(r),i=c.getViewport({scale:window.devicePixelRatio??1.5}),n=300/72,a=document.createElement("canvas"),s=a.getContext("2d");if(!s)throw Error("2D rendering on <canvas> is not supported");const w={canvasContext:s,viewport:i,transform:n,0,0,n,0,0};a.height=Math.floor(i.height*n),a.width=Math.floor(i.width*n),await c.render(w).promise;const d=await new Promise(f=>a.toBlob(f));if(!d)continue;const p=URL.createObjectURL(d);window.open(p),URL.revokeObjectURL(p)}}finally{Array.prototype.getIndexByTitleLc=o}} })();
22:10:27 できた！
CSPの影響で、Chromeではfake workeとしてしか起動しない
worker-srcでblob:が許可されていない
21:42:41 できたので試す
code:test.ts
/// <reference no-default-lib="true" />
/// <reference lib="esnext" />
/// <reference lib="dom" />
import type {
getDocument,
GlobalWorkerOptions,
} from "./deno-pdfjs-dist-types/mod.d.ts";
declare global {
interface Window {
pdfjsLib: {
getDocument: typeof getDocument;
GlobalWorkerOptions: typeof GlobalWorkerOptions;
};
}
}
// load pdfjs
await new Promise<void>((resolve, reject) => {
const script = document.createElement("script");
script.src =
script.addEventListener("load", () => resolve());
script.addEventListener("error", reject);
document.body.append(script);
});
// initialize
window.pdfjsLib.GlobalWorkerOptions.workerSrc =
// upload file
const file = await new Promise<File | undefined>((resolve, reject) => {
const input = document.createElement("input");
input.type = "file";
input.accept = "application/pdf,.pdf";
input.addEventListener("change", () => {
resolve(
input.files?.0 ?? undefined, );
});
input.addEventListener("error", reject);
document.body.append(input);
input.click();
input.remove();
});
if (file) {
const data = new Uint8Array(await file.arrayBuffer());
const pdf = await window.pdfjsLib.getDocument({
data,
cMapUrl:
cMapPacked: true,
}).promise;
// browse
console.log(pdf);
}
うまくいった！
ちょっと試してみるか