PdfCanvas
EN

Installare pdfcanvas

Il pacchetto include TypeScript ed ESM. Tre file devono essere serviti dal tuo dominio: il worker di PDF.js, i suoi asset di supporto e il binario WebAssembly di PDFium.

Apri l'editor PDFUltimo aggiornamento:

1. Installa

npm install pdfcanvas pdfjs-dist pdf-lib @embedpdf/pdfium

I tre pacchetti peer sono dichiarati, ma installarli esplicitamente rende ovvi i percorsi del worker e il lockfile.

2. Copia gli asset

Copia questi file in una cartella public che il bundler serve così com'è.

build/pdf.worker.min.mjs          -> public/pdfjs/pdf.worker.min.mjs
cmaps/                            -> public/pdfjs/cmaps/
standard_fonts/                   -> public/pdfjs/standard_fonts/
wasm/                             -> public/pdfjs/wasm/
@embedpdf/pdfium/dist/pdfium.wasm -> public/pdfium/pdfium.wasm
assets/fonts/                     -> public/fonts/

3. Monta il motore

import { PdfCanvas } from "pdfcanvas";

const pdf = new PdfCanvas(document.querySelector("#editor")!, {
  workerSrc: "/pdfjs/pdf.worker.min.mjs",
  cMapUrl: "/pdfjs/cmaps/",
  standardFontDataUrl: "/pdfjs/standard_fonts/",
  wasmUrl: "/pdfjs/wasm/",
  pdfiumWasmUrl: "/pdfium/pdfium.wasm",
  fontAssetsUrl: "/fonts/",
  initialZoom: "fit-width",
});

await pdf.load(file);

Note sui bundler

  • Vite: importa il worker con ?url se preferisci che il bundler lo emetta.
  • Next.js: l'editor è solo client. Usa dynamic import con ssr: false.
  • Il contenitore richiede un'altezza. Un figlio flex con min-height: 0 è la soluzione abituale.
  • Servi i .wasm con application/wasm così il browser può compilarli in streaming.

Domande frequenti

+Posso caricare il worker da una CDN?

Tecnicamente sì, ma la libreria non lo fa di default. Una CDN terza vedrebbe le richieste generate dai tuoi documenti, il che annulla la garanzia di elaborazione locale.

+Perché il file PDFium è così grande?

È un motore PDF completo compilato in WebAssembly. Viene scaricato una volta, messo in cache dal browser e serve solo per modificare il testo esistente.

+Servono tutti i CMaps e i font standard?

Solo per PDF che referenziano font non incorporati o encoding CJK. Includerli evita glifi rotti su quei documenti.

Pagine correlate