多くの業界では、請求書や領収書などのドキュメントをキャプチャ、編集し、クラウドにアップロードするためにドキュメント スキャナ アプリが不可欠です。 Dynamsoft Document Viewer SDK を活用すると、プログレッシブ Web アプリ (PWA) ドキュメント スキャナーを構築できます。これにより、ユーザーは画像をキャプチャし、トリミングし、複数のページを 1 つのドキュメントに結合し、スキャンしたドキュメントを PDF 形式に変換して、簡単に共有したり保存したりできます。このチュートリアルでは、Dynamsoft Document Viewer SDK を使用して PWA ドキュメント スキャナーを作成するプロセスを説明します。
Dynamsoft Document Viewer: このパッケージは、PDF や JPEG、PNG、TIFF、および BMP。主な機能には、PDF レンダリング、ページ ナビゲーション、画質向上、ドキュメント保存機能などがあります。 SDK は npm で見つけることができます。
Dynamsoft Capture Vision トライアル ライセンス: Dynamsoft SDK のすべての機能へのアクセスを提供する 30 日間の無料トライアル ライセンス。
Node.js/Express サーバー を作成しましょう。
依存関係のインストール
mkdir server cd server
npm init -y
Express と cors をインストールします:
npm install express cors
説明
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
プロジェクトに基づいて、次の機能を追加します:
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}`);
});
uiConfig.js で、save という名前のクリック イベントを含むカスタマイズされたダウンロード ボタンを追加します。
node index.js
index.html で、save イベントを実装します。ドキュメントを PDF として保存した後、BLOB を Base64 文字列に変換し、サーバーにアップロードします。
mkdir client cd client
プロジェクトのルート ディレクトリで 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"
}
Web ブラウザで http://localhost:8000 にアクセスします。
https://github.com/yushulx/web-twain-document-scan-management/tree/main/examples/pwa
以上がPWA ドキュメント スキャナーの構築方法: PDF としてキャプチャ、編集、アップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
