So erstellen Sie einen PWA-Dokumentenscanner: Erfassen, bearbeiten und als PDF hochladen

In vielen Branchen ist eine Dokumentenscanner-App unerlässlich, um Dokumente wie Rechnungen und Quittungen in die Cloud zu erfassen, zu bearbeiten und hochzuladen. Durch die Nutzung des Dynamsoft Document Viewer SDK können Sie einen Progressive Web App (PWA)-Dokumentenscanner erstellen, der es Benutzern ermöglicht, Bilder zu erfassen, zuzuschneiden, mehrere Seiten in einem einzigen Dokument zu kombinieren, und konvertieren Sie die gescannten Dokumente in das PDF-Format, um sie einfach weiterzugeben und zu speichern. Dieses Tutorial führt Sie durch den Prozess der Erstellung eines PWA-Dokumentenscanners mit dem Dynamsoft Document Viewer SDK.

Demovideo zum PWA-Dokumentenscanner

Voraussetzungen

• Dynamsoft Document Viewer: Dieses Paket stellt JavaScript-APIs zum Anzeigen und Kommentieren einer Vielzahl von Dokumentformaten bereit, einschließlich PDFs und Bildern wie JPEG, PNG, TIFF und BMP. Zu den wichtigsten Funktionen gehören PDF-Rendering, Seitennavigation, Verbesserung der Bildqualität und Funktionen zum Speichern von Dokumenten. Sie finden das SDK auf npm.

• Dynamsoft Capture Vision-Testlizenz: Eine 30-tägige kostenlose Testlizenz, die Zugriff auf alle Funktionen der Dynamsoft SDKs bietet.

Erstellen eines Webservers zum Hochladen von PDF-Dateien

Lassen Sie uns einen Node.js/Express-Server erstellen, um eine Base64-Zeichenfolge zu empfangen und sie als PDF-Datei auf der lokalen Festplatte zu speichern.

Abhängigkeiten installieren

1. Erstellen Sie einen Ordner für Ihren Server:
   

   mkdir server
   cd server
   

2. Node.js-Projekt initialisieren:
   

   npm init -y
   

3. Installieren Sie Express und cors:
   

   npm install express cors
   

   Erklärung

   • Express vereinfacht die Erstellung eines Webservers.
   • CORS (Cross-Origin Resource Sharing) ist Middleware, die Cross-Origin-Anfragen ermöglicht.

Erstellen Sie den Servercode (index.js)

1. Erstellen Sie eine index.js-Datei mit dem folgenden Code:
   

   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. Führen Sie den Webserver aus:
   

   node index.js
   

Implementierung eines PWA-Dokumentenscanners mit Dynamsoft Document Viewer

Um mit dem Dynamsoft Document Viewer zu beginnen, laden Sie den offiziellen Beispielcode aus dem GitHub-Repository herunter: https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing- Arbeitsablauf. Dieses Beispiel zeigt, wie Sie mit dem Dynamsoft Document Viewer SDK mehrere Bilder erfassen, zuschneiden und in einem einzigen Dokument kombinieren.

Basierend auf dem Projekt werden wir die folgenden Funktionen hinzufügen:

• Unterstützung für PWA.
• Gescannte Dokumente als PDF-Dateien auf einen Server hochladen.

Ein Webprojekt PWA-kompatibel machen

1. Erstellen Sie einen Ordner für Ihr PWA-Projekt:
   

   mkdir server
   cd server
   

2. Kopieren Sie den Beispielcode in den Client-Ordner.

3. Erstellen Sie eine manifest.json-Datei im Stammverzeichnis Ihres Projekts mit folgendem Inhalt:
   

   npm init -y
   

4. Erstellen Sie im Stammverzeichnis Ihres Projekts eine sw.js-Datei mit folgendem Inhalt:
   

   npm install express cors
   

5. Registrieren Sie den Servicemitarbeiter in der Datei 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}`);
   });
   

Hochladen gescannter Dokumente als PDF-Dateien

1. Fügen Sie in uiConfig.js eine benutzerdefinierte Download-Schaltfläche mit einem Klickereignis namens „save:“ hinzu.
   

   node index.js
   

2. Implementieren Sie in index.html das Speicherereignis. Nachdem Sie das Dokument als PDF gespeichert haben, konvertieren Sie das Blob in eine Base64-Zeichenfolge und laden Sie es auf den Server hoch:
   

   mkdir client
   cd client
   

Ausführen des PWA-Dokumentenscanners

1. Starten Sie einen Webserver im Stammverzeichnis Ihres Projekts:
   

   {
       "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. Besuchen Sie http://localhost:8000 in Ihrem Webbrowser.

   

Quellcode

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

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen PWA-Dokumentenscanner: Erfassen, bearbeiten und als PDF hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!