PWA 문서 스캐너를 구축하는 방법: PDF로 캡처, 편집 및 업로드-JS 튜토리얼-php.cn

PWA 문서 스캐너를 구축하는 방법: PDF로 캡처, 편집 및 업로드

Susan Sarandon

풀어 주다： 2024-10-25 06:34:02

원래의

574명이 탐색했습니다.

많은 산업 분야에서 송장 및 영수증과 같은 문서를 캡처, 편집하고 클라우드에 업로드하려면 문서 스캐너 앱이 필수적입니다. 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 서버를 만들어 보겠습니다.

종속성 설치

서버용 폴더 만들기:
```
mkdir server
cd server
```
로그인 후 복사
로그인 후 복사
Node.js 프로젝트 초기화:
```
npm init -y
```
로그인 후 복사
로그인 후 복사
Express 및 cors 설치:
```
npm install express cors
```
로그인 후 복사
로그인 후 복사
설명
- Express는 웹 서버 생성을 단순화합니다.
- CORS(Cross-Origin Resource Sharing)는 Cross-Origin 요청을 허용하는 미들웨어입니다.

서버 코드 생성(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 Document Viewer를 시작하려면 GitHub 저장소(https://github.com/Dynamsoft/mobile-web-capture/tree/master/samples/complete-document-capturing-)에서 공식 샘플 코드를 다운로드하세요. 작업 흐름. 이 샘플은 Dynamsoft Document Viewer SDK를 사용하여 여러 이미지를 캡처하고 자르고 단일 문서로 결합하는 방법을 보여줍니다.

프로젝트를 기반으로 다음 기능을 추가합니다.

PWA를 지원합니다.
스캔한 문서를 PDF 파일로 서버에 업로드하세요.

웹 프로젝트를 PWA와 호환되게 만들기

PWA 프로젝트용 폴더 만들기:
```
mkdir server
cd server
```
로그인 후 복사
로그인 후 복사
샘플 코드를 클라이언트 폴더에 복사하세요.
다음 콘텐츠를 사용하여 프로젝트의 루트 디렉터리에 매니페스트.json 파일을 만듭니다.
```
npm init -y
```
로그인 후 복사
로그인 후 복사
다음 콘텐츠로 프로젝트의 루트 디렉터리에 sw.js 파일을 만듭니다.
```
npm install express cors
```
로그인 후 복사
로그인 후 복사

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 파일로 업로드

uiConfig.js에서 save라는 클릭 이벤트가 있는 사용자 정의 다운로드 버튼을 추가하세요.
```
node index.js
```
로그인 후 복사
로그인 후 복사
index.html에서 save 이벤트를 구현합니다. 문서를 PDF로 저장한 후 Blob을 Base64 문자열로 변환하고 서버에 업로드하세요.
```
mkdir client
cd client
```
로그인 후 복사

PWA 문서 스캐너 실행

프로젝트의 루트 디렉터리에서 웹 서버를 시작합니다.

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

로그인 후 복사