Comment créer un studio d'annotation de documents dans le navigateur
Les équipes travaillant avec des contrats, des factures ou des preuves ont besoin de plus qu'un simple visionneur. Elles ont besoin d'un moyen d'assembler des pages provenant de différentes sources sans télécharger de fichiers sensibles sur un serveur.
Vous pouvez créer un studio d'annotation de documents côté client en utilisant TypeScript, Vite et les outils Dynamsoft.
Cette application vous permet de :
- Ouvrir des PDF et des images.
- Ajouter de nouveaux fichiers à un document existant au lieu de le remplacer.
- Capturer des pages directement depuis un scanner.
- Ajouter des marques de caviardage mobiles et des tampons d'approbation.
- Supprimer les pages indésirables.
- Exporter les documents terminés au format PDF, PNG, JPEG ou TIFF.
Stack technique :
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite et TypeScript
Logique clé :
Au lieu de remplacer le fichier actuel, utilisez doc.loadSource(source, index) pour ajouter des pages. Cela vous permet de créer un document unique à partir de plusieurs images et PDF différents.
Pour les scanners, utilisez le pont Dynamic Web TWAIN. Comme les navigateurs ne disposent pas d'une API de scanner standard, DWT fournit la connexion au matériel. Vous pouvez convertir les images numérisées en un blob PDF et les ajouter instantanément à votre visionneur.
Pour la sécurité, utilisez des annotations de caviardage. Vous pouvez créer un rectangle noir sur un texte sensible. Les utilisateurs peuvent déplacer ou redimensionner cette marque avant de l'appliquer de manière permanente au document.
L'exportation est flexible. Vous pouvez choisir différents modes PDF :
- Mode annotation : conserve les marques modifiables.
- Mode Flatten : fusionne les marques dans la page.
- Mode image : convertit les pages en images.
Cette approche maintient tout le traitement côté client. Vos données restent privées et sécurisées.