首頁 >web前端 >js教程 >如何建立 PWA 文件掃描器：擷取、編輯和上傳為 PDF

如何建立 PWA 文件掃描器：擷取、編輯和上傳為 PDF

Susan Sarandon原創: 2024-10-25 06:34:02648瀏覽

在許多行業中，文件掃描器應用程式對於捕獲、編輯文件以及將發票和收據上傳到雲端至關重要。透過利用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 專案：
```
npm init -y
```
安裝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}`);
});

運行網路伺服器：
```
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 相容

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

將掃描文件上傳為 PDF 文件

在 uiConfig.js 中，新增一個自訂下載按鈕，其中包含名為 save 的點擊事件：
```
node index.js
```
在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中文網其他相關文章！

JavaScript json html npm express String Resource for format include Directory register using Event copy JS this github web app http https Access

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：## 如何使用 jQuery 檢查元素在視窗中是否可見？下一篇：## 如何使用 jQuery 檢查元素在視窗中是否可見？

看更多