在許多行業中，文件掃描器應用程式對於捕獲、編輯文件以及將發票和收據上傳到雲端至關重要。透過利用Dynamsoft Document Viewer SDK，您可以建立漸進式Web 應用程式(PWA) 文件掃描儀，使用戶能夠擷取影像、裁切影像、將多個頁面合併到單一文件中，並將掃描的文件轉換為PDF格式，以便於共用和儲存。本教學將引導您完成使用 Dynamsoft Document Viewer SDK 建立 PWA 文件掃描器的流程。
Dynamsoft Document Viewer：此軟體包提供JavaScript API，用於檢視和註解各種文件格式，包括PDF 和映像，例如JPEG、 PNG、TIFF 和BMP。主要功能包括 PDF 渲染、頁面導航、影像品質增強和文件保存功能。您可以在 npm 上找到 SDK。
Dynamsoft Capture Vision 試用許可證：30 天免費試用許可證，可以存取 Dynamsoft SDK 的所有功能。
讓我們建立一個 Node.js/Express 伺服器來接收 Base64 字串並將其作為 PDF 檔案儲存到本機磁碟。
為您的伺服器建立一個資料夾：
mkdir server cd server
初始化 Node.js 專案：
npm init -y
安裝Express和cors：
npm install express cors
說明
使用以下程式碼建立一個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}`);
});
運行網路伺服器：
node index.js
要開始使用Dynamsoft 文件檢視器，請從GitHub 儲存庫下載官方範例程式碼：https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-工作流程。此範例示範如何使用 Dynamsoft Document Viewer SDK 擷取、裁切多個影像並將其合併到單一文件中。
基於該項目，我們將添加以下功能：
為您的 PWA 專案建立一個資料夾：
mkdir server cd server
將範例程式碼複製到客戶端資料夾中。
在專案根目錄下建立一個manifest.json文件，內容如下：
npm init -y
在專案根目錄下建立一個 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}`);
});
在 uiConfig.js 中，新增一個自訂下載按鈕，其中包含名為 save 的點擊事件：
node index.js
在index.html中，實作save事件。將文件儲存為 PDF 後，將 blob 轉換為 Base64 字串並將其上傳到伺服器：
mkdir client cd client
在專案的根目錄中啟動一個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中文網其他相關文章！
