Comment créer un scanner de documents PWA : capturer, modifier et télécharger au format PDF

Dans de nombreux secteurs, une application de numérisation de documents est essentielle pour capturer, éditer et télécharger des documents tels que des factures et des reçus vers le cloud. En tirant parti du Dynamsoft Document Viewer SDK, vous pouvez créer un scanner de documents Progressive Web App (PWA) qui permet aux utilisateurs de capturer des images, de les recadrer, de combiner plusieurs pages en un seul document, et convertissez les documents numérisés au format PDF pour un partage et un stockage faciles. Ce didacticiel vous guidera tout au long du processus de création d'un scanner de documents PWA à l'aide du SDK Dynamsoft Document Viewer.

Vidéo de démonstration du scanner de documents PWA

Conditions préalables

• Dynamsoft Document Viewer : ce package fournit des API JavaScript pour visualiser et annoter un large éventail de formats de documents, y compris des PDF et des images comme JPEG, PNG, TIFF et BMP. Les fonctionnalités clés incluent le rendu PDF, la navigation dans les pages, l'amélioration de la qualité de l'image et les capacités d'enregistrement de documents. Vous pouvez trouver le SDK sur npm.

• Licence d'essai Dynasoft Capture Vision : Une licence d'essai gratuite de 30 jours qui donne accès à toutes les fonctionnalités des SDK Dynamsoft.

Création d'un serveur Web pour télécharger des fichiers PDF

Créons un serveur Node.js/Express pour recevoir une chaîne Base64 et enregistrons-la sous forme de fichier PDF sur le disque local.

Installer les dépendances

1. Créez un dossier pour votre serveur :
   

   mkdir server
   cd server
   

2. Initialiser un projet Node.js :
   

   npm init -y
   

3. Installer Express et cors :
   

   npm install express cors
   

   Explication

   • Express simplifie la création d'un serveur web.
   • CORS (Cross-Origin Resource Sharing) est un middleware qui permet les requêtes cross-origin.

Créer le code du serveur (index.js)

1. Créez un fichier index.js avec le code suivant :
   

   const express = require('express');
   const cors = require('cors');
   const fs = require('fs');
   const path = require('path');
   
   const app = express();
   const PORT = 3000;
   
   app.use(cors());
   app.use(express.json({ limit: '10mb' }));
   
   app.post('/upload', (req, res) => {
       const { image } = req.body;
   
       if (!image) {
           return res.status(400).json({ error: 'No image provided.' });
       }
   
       const buffer = Buffer.from(image, 'base64');
   
       // Save the image to disk
       const filename = `image_${Date.now()}.pdf`;
       const filepath = path.join(__dirname, 'uploads', filename);
   
       // Ensure the uploads directory exists
       if (!fs.existsSync('uploads')) {
           fs.mkdirSync('uploads');
       }
   
       fs.writeFile(filepath, buffer, (err) => {
           if (err) {
               console.error('Failed to save image:', err);
               return res.status(500).json({ error: 'Failed to save image.' });
           }
   
           console.log('Image saved:', filename);
           res.json({ message: 'Image uploaded successfully!', filename });
       });
   });
   
   // Start the server
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

2. Exécutez le serveur Web :
   

   node index.js
   

Implémentation d'un scanner de documents PWA avec Dynamsoft Document Viewer

Pour démarrer avec Dynamsoft Document Viewer, téléchargez l'exemple de code officiel à partir du référentiel GitHub : https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing- flux de travail. Cet exemple montre comment capturer, recadrer et combiner plusieurs images en un seul document à l'aide du SDK Dynamsoft Document Viewer.

En fonction du projet, nous ajouterons les fonctionnalités suivantes :

• Prise en charge de PWA.
• Télécharger des documents numérisés sous forme de fichiers PDF sur un serveur.

Rendre un projet Web compatible PWA

1. Créez un dossier pour votre projet PWA :
   

   mkdir server
   cd server
   

2. Copiez l'exemple de code dans le dossier client.

3. Créez un fichier manifest.json dans le répertoire racine de votre projet avec le contenu suivant :
   

   npm init -y
   

4. Créez un fichier sw.js dans le répertoire racine de votre projet avec le contenu suivant :
   

   npm install express cors
   

5. Enregistrez le service worker dans le fichier index.html :
   

   const express = require('express');
   const cors = require('cors');
   const fs = require('fs');
   const path = require('path');
   
   const app = express();
   const PORT = 3000;
   
   app.use(cors());
   app.use(express.json({ limit: '10mb' }));
   
   app.post('/upload', (req, res) => {
       const { image } = req.body;
   
       if (!image) {
           return res.status(400).json({ error: 'No image provided.' });
       }
   
       const buffer = Buffer.from(image, 'base64');
   
       // Save the image to disk
       const filename = `image_${Date.now()}.pdf`;
       const filepath = path.join(__dirname, 'uploads', filename);
   
       // Ensure the uploads directory exists
       if (!fs.existsSync('uploads')) {
           fs.mkdirSync('uploads');
       }
   
       fs.writeFile(filepath, buffer, (err) => {
           if (err) {
               console.error('Failed to save image:', err);
               return res.status(500).json({ error: 'Failed to save image.' });
           }
   
           console.log('Image saved:', filename);
           res.json({ message: 'Image uploaded successfully!', filename });
       });
   });
   
   // Start the server
   app.listen(PORT, () => {
       console.log(`Server is running on http://localhost:${PORT}`);
   });
   

Téléchargement de documents numérisés sous forme de fichiers PDF

1. Dans uiConfig.js, ajoutez un bouton de téléchargement personnalisé avec un événement de clic nommé save :
   

   node index.js
   

2. Dans index.html, implémentez l'événement save. Après avoir enregistré le document au format PDF, convertissez le blob en chaîne Base64 et téléchargez-le sur le serveur :
   

   mkdir client
   cd client
   

Exécution du scanner de documents PWA

1. Démarrez un serveur web dans le répertoire racine de votre projet :
   

   {
       "short_name": "MyPWA",
       "name": "My Progressive Web App",
       "icons": [
           {
               "src": "icon.png",
               "sizes": "192x192",
               "type": "image/png"
           }
       ],
       "start_url": "/",
       "display": "standalone",
       "background_color": "#ffffff",
       "theme_color": "#000000"
   }
   

2. Visitez http://localhost:8000 dans votre navigateur Web.

   

Code source

https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/pwa

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!