?? ?? ???? ?? ? ???? ?? ??? ??, ???? ????? ?????? ?? ??? ?? ??????. Dynamsoft Document Viewer SDK? ???? ???? ???? ????, ???, ?? ???? ?? ??? ??? ? ?? ?????? ? ?(PWA) ?? ???? ??? ? ????. ??? ??? PDF ???? ???? ?? ???? ??? ? ????. ? ????? Dynamsoft Document Viewer SDK? ???? PWA ?? ???? ??? ??? ?????.

PWA ?? ??? ?? ???

?? ??

• Dynamsoft Document Viewer: ? ???? JPEG, PNG, TIFF, BMP. ?? ???? PDF ???, ??? ??, ??? ?? ?? ? ?? ?? ??? ?????. npm?? SDK? ?? ? ????.

• Dynamsoft Capture Vision ??? ????: Dynamsoft SDK? ?? ??? ?? ???? ???? 30? ?? ??? ????

PDF ?? ???? ?? ? ?? ??

Base64 ???? ???? ?? PDF ??? ?? ???? ????

Node.js/Express ??? ??? ?????.

??? ??

1. ??? ?? ???:

   
   

   mkdir server
   cd server
   

2. Node.js ???? ???:

   
   

   npm init -y
   

3. Express ? cors ??:
   

   npm install express cors
   

   ??

   • Express? ? ?? ??? ??????.
   • CORS(Cross-Origin Resource Sharing)? Cross-Origin ??? ???? ???????.

?? ?? ??(index.js)

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

2. ? ?? ??:

   
   

   node index.js
   

Dynamsoft Document Viewer? ???? PWA ?? ??? ??

Dynamsoft Document Viewer? ????? GitHub ???(https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-)?? ?? ?? ??? ???????. ?? ??. ? ??? Dynamsoft Document Viewer SDK? ???? ?? ???? ???? ??? ?? ??? ???? ??? ?????.

????? ???? ?? ??? ?????.

• PWA? ?????.
• ??? ??? PDF ??? ??? ??????.

? ????? PWA? ???? ???

1. PWA ????? ?? ???:
   

   mkdir server
   cd server
   

2. ?? ??? ????? ??? ?????.

3. ?? ???? ???? ????? ?? ????? ?????.json ??? ????.
   

   npm init -y
   

4. ?? ???? ????? ?? ????? sw.js ??? ????.
   

   npm install express cors
   

5. index.html ??? ??? ??? ?????.
   

   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 ??? ???

1. uiConfig.js?? save?? ?? ???? ?? ??? ?? ???? ??? ?????.
   

   node index.js
   

2. index.html?? save ???? ?????. ??? PDF? ??? ? Blob? Base64 ???? ???? ??? ??????.
   

   mkdir client
   cd client
   

PWA ?? ??? ??

1. ????? ?? ?????? ? ??? ?????.
   

   {
       "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. ? ?????? http://localhost:8000? ?????.

   

?? ??

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

? ??? PWA ?? ???? ???? ??: PDF? ??, ?? ? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!