How to Build a PWA Document Scanner: Capture, Edit and Upload as PDF-JS Tutorial-php.cn

How to Build a PWA Document Scanner: Capture, Edit and Upload as PDF

Susan Sarandon

Release： 2024-10-25 06:34:02

Original

671 people have browsed it

In many industries, a document scanner app is essential for capturing, editing, and uploading documents such as invoices and receipts to the cloud. By leveraging the Dynamsoft Document Viewer SDK, you can build a Progressive Web App (PWA) document scanner that enables users to capture images, crop them, combine multiple pages into a single document, and convert the scanned documents to PDF format for easy sharing and storage. This tutorial will guide you through the process of creating a PWA document scanner using the Dynamsoft Document Viewer SDK.

PWA Document Scanner Demo Video

Prerequisites

Dynamsoft Document Viewer: This package provides JavaScript APIs for viewing and annotating a wide range of document formats, including PDFs and images like JPEG, PNG, TIFF, and BMP. Key features include PDF rendering, page navigation, image quality enhancement, and document saving capabilities. You can find the SDK on npm.
Dynamsoft Capture Vision Trial License: A 30-day free trial license that provides access to all features of the Dynamsoft SDKs.

Creating a Web Server for Uploading PDF Files

Let's create a Node.js/Express server to receive a Base64 string and save it as a PDF file to the local disk.

Install Dependencies

Create a folder for your server:
```
mkdir server
cd server
```
Copy after login
Copy after login
Initialize a Node.js project:
```
npm init -y
```
Copy after login
Copy after login
Install Express and cors:
```
npm install express cors
```
Copy after login
Copy after login
Explanation
- Express simplifies the creation of a web server.
- CORS (Cross-Origin Resource Sharing) is middleware that allows cross-origin requests.

Create the Server Code (index.js)

Create an index.js file with the following code:

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

Copy after login

Run the web server:
```
node index.js
```
Copy after login
Copy after login

Implementing a PWA Document Scanner with Dynamsoft Document Viewer

To get started with the Dynamsoft Document Viewer, download the official sample code from the GitHub repository: https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-workflow. This sample demonstrates how to capture, crop, and combine multiple images into a single document using the Dynamsoft Document Viewer SDK.

Based on the project, we will add the following features:

Support for PWA.
Upload scanned documents as PDF files to a server.

Making a Web Project PWA-Compatible

Create a folder for your PWA project:
```
mkdir server
cd server
```
Copy after login
Copy after login
Copy the sample code into the client folder.
Create a manifest.json file in the root directory of your project with the following content:
```
npm init -y
```
Copy after login
Copy after login
Create a sw.js file in the root directory of your project with the following content:
```
npm install express cors
```
Copy after login
Copy after login

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

Copy after login

Uploading Scanned Documents as PDF Files

In uiConfig.js, add a customized download button with a click event named save:
```
node index.js
```
Copy after login
Copy after login
In index.html, implement the save event. After saving the document as a PDF, convert the blob to a Base64 string and upload it to the server:
```
mkdir client
cd client
```
Copy after login

Running the PWA Document Scanner

Start a web server in the root directory of your project:

{
    "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"
}

Copy after login

Visit http://localhost:8000 in your web browser.

Source Code

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

The above is the detailed content of How to Build a PWA Document Scanner: Capture, Edit and Upload as PDF. For more information, please follow other related articles on the PHP Chinese website!