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

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

1. Create a folder for your server:
   

   mkdir server
   cd server
   

2. Initialize a Node.js project:
   

   npm init -y
   

3. Install Express and cors:
   

   npm install express cors
   

   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)

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

2. Run the web server:
   

   node index.js
   

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

1. Create a folder for your PWA project:
   

   mkdir server
   cd server
   

2. Copy the sample code into the client folder.

3. Create a manifest.json file in the root directory of your project with the following content:
   

   npm init -y
   

4. Create a sw.js file in the root directory of your project with the following content:
   

   npm install express cors
   

5. Register the service worker in the index.html file:
   

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

Uploading Scanned Documents as PDF Files

1. In uiConfig.js, add a customized download button with a click event named save:
   

   node index.js
   

2. 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
   

Running the PWA Document Scanner

1. 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"
   }
   

2. 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!