PdfCanvas
EN

L'interfaccia completa dell'editor

pdfcanvas/editor è la stessa shell usata su questo sito: toolbar, rail delle pagine, inspector delle proprietà, dialogo firma, template e autosalvataggio. Un solo import, nessun foglio di stile da dimenticare.

Apri l'editor PDFUltimo aggiornamento:

Montala

import { PdfCanvasEditor } from "pdfcanvas/editor";

const editor = new PdfCanvasEditor(document.querySelector("#app")!, {
  workerSrc: "/pdfjs/pdf.worker.min.mjs",
  pdfiumWasmUrl: "/pdfium/pdfium.wasm",
  fontAssetsUrl: "/fonts/",
  locale: "auto",
  brandName: "Il tuo prodotto",
  brandHref: "/",
  brandTarget: "_self",
  sampleUrl: "/sample.pdf",
  autosave: { key: "contratti", debounce: 600 },
});

await editor.ready();
await editor.open(file);

Opzioni

OpzioneScopo
localeauto, en o it. Auto segue il browser.
brandName / brandHrefEtichetta e link nell'header.
brandTarget_blank o _self.
sampleUrlAbilita il pulsante del documento di esempio.
autosaveChiave IndexedDB e debounce.
templatesOmetti per il set incluso, o passa i tuoi.

API dell'editor

await editor.open(source, "nome.pdf");
await editor.download();
await editor.ready();
await editor.applyTemplate(template);
editor.registerTemplate(template);

editor.core;   // l'istanza PdfCanvas
editor.destroy();

Autosalvataggio e template

L'autosalvataggio conserva i byte del PDF originale e la scena in IndexedDB. Nulla viene caricato. Usa una chiave distinta per documento e chiama destroy() per rilasciare listener e DOM.

I template sono oggetti posizionati in punti PDF dall'angolo in alto a sinistra della pagina. Gli oggetti testo accettano text, fontSize, fontFamily, bold, italic e colore; le forme accettano shape, width, height, fill, stroke e strokeWidth.

Stile

Il CSS viene iniettato al primo mount. Quando fontAssetsUrl punta alla cartella assets/fonts del pacchetto, l'editor carica i file Space Grotesk e Fraunces inclusi e appare come la versione ospitata. Altrimenti usa i font di sistema.

Domande frequenti

+Posso localizzare oltre l'inglese e l'italiano?

Inglese e italiano sono inclusi. Le altre lingue richiedono di modificare la tabella delle etichette nel sorgente; è un oggetto semplice, non un sistema di traduzione runtime.

+Posso nascondere parti dell'interfaccia?

La shell è un unico componente. Per un layout diverso usa il motore core e costruisci la tua toolbar; è ciò che fa internamente l'editor.

+L'autosalvataggio è opzionale?

Sì. Ometti l'opzione autosave e nulla viene scritto in IndexedDB.

+Come faccio la pulizia?

Chiama editor.destroy() quando il contenitore viene smontato. Rimuove listener, worker e DOM iniettato.

Pagine correlate