Cara Membina Pengimbas Dokumen PWA: Tangkap, Edit dan Muat Naik sebagai PDF

Dalam banyak industri, apl pengimbas dokumen adalah penting untuk menangkap, mengedit dan memuat naik dokumen seperti invois dan resit ke awan. Dengan memanfaatkan Dynamsoft Document Viewer SDK, anda boleh membina Progressive Web App (PWA) pengimbas dokumen yang membolehkan pengguna menangkap imej, memangkasnya, menggabungkan berbilang halaman menjadi satu dokumen, dan tukar dokumen yang diimbas kepada format PDF untuk perkongsian dan penyimpanan yang mudah. Tutorial ini akan membimbing anda melalui proses mencipta pengimbas dokumen PWA menggunakan Dynamsoft Document Viewer SDK.

Video Demo Pengimbas Dokumen PWA

Prasyarat

• Dynamsoft Document Viewer: Pakej ini menyediakan API JavaScript untuk melihat dan menganotasi pelbagai format dokumen, termasuk PDF dan imej seperti JPEG, PNG, TIFF dan BMP. Ciri utama termasuk pemaparan PDF, navigasi halaman, peningkatan kualiti imej dan keupayaan menyimpan dokumen. Anda boleh mencari SDK pada npm.

• Lesen Percubaan Dynamsoft Capture Vision: Lesen percubaan percuma 30 hari yang menyediakan akses kepada semua ciri SDK Dynamsoft.

Mencipta Pelayan Web untuk Memuat Naik Fail PDF

Mari kita cipta pelayan Node.js/Express untuk menerima rentetan Base64 dan menyimpannya sebagai fail PDF ke cakera setempat.

Pasang Ketergantungan

1. Buat folder untuk pelayan anda:
   

   mkdir server
   cd server
   

2. Memulakan projek Node.js:
   

   npm init -y
   

3. Pasang Express dan kors:
   

   npm install express cors
   

   Penjelasan

   • Express memudahkan penciptaan pelayan web.
   • CORS (Perkongsian Sumber Silang Asal) ialah perisian tengah yang membenarkan permintaan silang asal.

Cipta Kod Pelayan (index.js)

1. Buat fail index.js dengan kod berikut:
   

   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. Jalankan pelayan web:
   

   node index.js
   

Melaksanakan Pengimbas Dokumen PWA dengan Dynamsoft Document Viewer

Untuk bermula dengan Dynamsoft Document Viewer, muat turun kod sampel rasmi daripada repositori GitHub: https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing- aliran kerja. Sampel ini menunjukkan cara untuk menangkap, memangkas dan menggabungkan berbilang imej ke dalam satu dokumen menggunakan Dynamsoft Document Viewer SDK.

Berdasarkan projek, kami akan menambah ciri berikut:

• Sokongan untuk PWA.
• Muat naik dokumen yang diimbas sebagai fail PDF ke pelayan.

Membuat Projek Web PWA-Serasi

1. Buat folder untuk projek PWA anda:
   

   mkdir server
   cd server
   

2. Salin kod sampel ke dalam folder pelanggan.

3. Buat fail manifest.json dalam direktori akar projek anda dengan kandungan berikut:
   

   npm init -y
   

4. Buat fail sw.js dalam direktori akar projek anda dengan kandungan berikut:
   

   npm install express cors
   

5. Daftarkan pekerja perkhidmatan dalam fail 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}`);
   });
   

Memuat naik Dokumen Diimbas sebagai Fail PDF

1. Dalam uiConfig.js, tambahkan butang muat turun tersuai dengan acara klik bernama save:
   

   node index.js
   

2. Dalam index.html, laksanakan acara simpan. Selepas menyimpan dokumen sebagai PDF, tukar gumpalan kepada rentetan Base64 dan muat naiknya ke pelayan:
   

   mkdir client
   cd client
   

Menjalankan Pengimbas Dokumen PWA

1. Mulakan pelayan web dalam direktori akar projek anda:
   

   {
       "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. Lawati http://localhost:8000 dalam penyemak imbas web anda.

   

Kod Sumber

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

Atas ialah kandungan terperinci Cara Membina Pengimbas Dokumen PWA: Tangkap, Edit dan Muat Naik sebagai PDF. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!