在許多行業中，文件掃描器應用程式對於捕獲、編輯文件以及將發票和收據上傳到雲端至關重要。透過利用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 檔案儲存到本機磁碟。
安裝依賴項
-
為您的伺服器建立一個資料夾：
mkdir server
cd server
登入後複製
登入後複製
-
初始化 Node.js 專案：
-
安裝Express和cors：
npm install express cors
登入後複製
登入後複製
說明
-
Express 簡化了 Web 伺服器的建立。
-
CORS（跨來源資源共享）是允許跨來源請求的中間件。
建立伺服器程式碼 (index.js)
-
使用以下程式碼建立一個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}`);
});
登入後複製
登入後複製
-
運行網路伺服器：
使用 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 相容
-
為您的 PWA 專案建立一個資料夾：
mkdir server
cd server
登入後複製
登入後複製
將範例程式碼複製到客戶端資料夾中。
-
在專案根目錄下建立一個manifest.json文件，內容如下：
-
在專案根目錄下建立一個 sw.js 文件，內容如下：
npm install express cors
登入後複製
登入後複製
-
在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 文件
-
在 uiConfig.js 中，新增一個自訂下載按鈕，其中包含名為 save 的點擊事件：
-
在index.html中，實作save事件。將文件儲存為 PDF 後，將 blob 轉換為 Base64 字串並將其上傳到伺服器：
mkdir client
cd client
登入後複製
運行 PWA 文件掃描儀
-
在專案的根目錄中啟動一個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"
}
登入後複製
-
在網頁瀏覽器中造訪 http://localhost:8000。
原始碼
https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/pwa
以上是如何建立 PWA 文件掃描器：擷取、編輯和上傳為 PDF的詳細內容。更多資訊請關注PHP中文網其他相關文章！
