Come costruire uno studio di annotazione documenti nel browser
I team che lavorano con contratti, fatture o prove hanno bisogno di qualcosa di più di un semplice visualizzatore. Hanno bisogno di un modo per assemblare pagine provenienti da diverse fonti senza caricare file sensibili su un server.
È possibile costruire uno studio di annotazione documenti lato client utilizzando TypeScript, Vite e gli strumenti Dynamsoft.
Questa app ti permette di:
- Aprire PDF e immagini.
- Aggiungere nuovi file a un documento esistente invece di sostituirlo.
- Acquisire pagine direttamente da uno scanner.
- Aggiungere segni di oscuramento (redaction) mobili e timbri di approvazione.
- Eliminare le pagine indesiderate.
- Esportare i documenti completati in formato PDF, PNG, JPEG o TIFF.
Stack Tecnologico:
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite and TypeScript
Logica Chiave:
Invece di sostituire il file corrente, utilizza doc.loadSource(source, index) per aggiungere pagine. Ciò consente di creare un unico documento a partire da diverse immagini e PDF.
Per gli scanner, utilizza il bridge Dynamic Web TWAIN. Poiché i browser non dispongono di un'API standard per gli scanner, DWT fornisce la connessione all'hardware. È possibile convertire le immagini scansionate in un blob PDF e aggiungerle istantaneamente al visualizzatore.
Per la sicurezza, utilizza le annotazioni di oscuramento (redaction). È possibile creare un rettangolo nero sopra il testo sensibile. Gli utenti possono spostare o ridimensionare questo segno prima di applicarlo permanentemente al documento.
L'esportazione è flessibile. È possibile scegliere diverse modalità PDF:
- Modalità annotazione: mantiene i segni modificabili.
- Modalità flatten: integra i segni nella pagina.
- Modalità immagine: converte le pagine in immagini.
Questo approccio mantiene tutta l'elaborazione lato client. I tuoi dati rimangono privati e sicuri.