如何构建 PWA 文档扫描仪：捕获、编辑和上传为 PDF

在许多行业中，文档扫描仪应用程序对于捕获、编辑文档以及将发票和收据上传到云端至关重要。通过利用 Dynamsoft Document Viewer SDK，您可以构建 渐进式 Web 应用程序 (PWA) 文档扫描仪，使用户能够捕获图像、裁剪图像、将多个页面合并到单个文档中，并将扫描的文档转换为PDF格式，以便于共享和存储。本教程将指导您完成使用 Dynamsoft Document Viewer SDK 创建 PWA 文档扫描仪的过程。

PWA 文档扫描仪演示视频

先决条件

• Dynamsoft Document Viewer：此软件包提供 JavaScript API，用于查看和注释各种文档格式，包括 PDF 和图像，例如 JPEG、PNG、TIFF 和 BMP。主要功能包括 PDF 渲染、页面导航、图像质量增强和文档保存功能。您可以在 npm 上找到 SDK。

• Dynamsoft Capture Vision 试用许可证：30 天免费试用许可证，可以访问 Dynamsoft SDK 的所有功能。

创建用于上传 PDF 文件的 Web 服务器

让我们创建一个 Node.js/Express 服务器来接收 Base64 字符串并将其作为 PDF 文件保存到本地磁盘。

安装依赖项

1. 为您的服务器创建一个文件夹：
   

   mkdir server
   cd server
   

2. 初始化 Node.js 项目：
   

   npm init -y
   

3. 安装Express和cors：
   

   npm install express cors
   

   说明

   • Express 简化了 Web 服务器的创建。
   • CORS（跨源资源共享）是允许跨源请求的中间件。

创建服务器代码 (index.js)

1. 使用以下代码创建一个index.js文件：
   

   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. 运行网络服务器：
   

   node index.js
   

使用 Dynamsoft Document Viewer 实施 PWA 文档扫描仪

要开始使用 Dynamsoft 文档查看器，请从 GitHub 存储库下载官方示例代码：https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-工作流程。此示例演示了如何使用 Dynamsoft Document Viewer SDK 捕获、裁剪多个图像并将其合并到单个文档中。

基于该项目，我们将添加以下功能：

• 支持PWA。
• 将扫描文档作为 PDF 文件上传到服务器。

使 Web 项目与 PWA 兼容

1. 为您的 PWA 项目创建一个文件夹：
   

   mkdir server
   cd server
   

2. 将示例代码复制到客户端文件夹中。

3. 在项目根目录下创建一个manifest.json文件，内容如下：
   

   npm init -y
   

4. 在项目根目录下创建一个 sw.js 文件，内容如下：
   

   npm install express cors
   

5. 在index.html文件中注册Service Worker：
   

   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}`);
   });
   

将扫描文档上传为 PDF 文件

1. 在 uiConfig.js 中，添加一个自定义下载按钮，其中包含名为 save 的单击事件：
   

   node index.js
   

2. 在index.html中，实现save事件。将文档保存为 PDF 后，将 blob 转换为 Base64 字符串并将其上传到服务器：
   

   mkdir client
   cd client
   

运行 PWA 文档扫描仪

1. 在项目的根目录中启动一个Web服务器：
   

   {
       "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. 在网络浏览器中访问 http://localhost:8000。

   

源代码

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

以上是如何构建 PWA 文档扫描仪：捕获、编辑和上传为 PDF的详细内容。更多信息请关注PHP中文网其他相关文章！