构建免费基于Web的文档转换器，支持扫描仪

发布: 3天前 (2025年12月2日 GMT+8 15:45)

5 min read

原文: Dev.to

Source: Dev.to

概览

在当今的数字世界中，我们经常需要将来自各种来源的文档进行转换、合并和编辑。无论是处理 PDF、Word 文档、手机拍摄的图片，还是来自实体扫描仪的扫描文档，拥有一个统一的工具来处理所有这些格式都是非常宝贵的。

演示：
免费在线文档转换器（支持扫描仪） – 实时演示

为什么这个工具有用

实际使用场景

家庭办公文档管理

将多张扫描的收据合并为一个 PDF，用于费用报告
在提交申请前将 Word 文档转换为 PDF
将手写笔记的照片与电子文档合并

远程工作与协作

在不上传至云服务的情况下快速编辑和合并文档（注重隐私）
从混合来源（相机、扫描仪、文件）创建文档包
在浏览器中直接编辑 Word 文档，无需 Microsoft Office

教育

学生可以合并课堂笔记、截图和扫描材料
教师可以将各种来源的内容组合成学习材料
学校电脑无需安装额外软件

小型企业

使用扫描仪处理纸质发票和收据
将混合媒体创建为专业的 PDF 作品集
在不购买昂贵软件的情况下编辑和合并合同

主要优势

100% 基于浏览器： 无需服务器上传，无隐私顾虑
免费核心功能： 文档查看、编辑、合并和导出
多格式支持： PDF、Word、图片、TIFF、文本文件
实体扫描仪支持： 可选集成 TWAIN/WIA/SANE/ICA 扫描仪
离线可用： 初次加载后无需互联网即可使用

免费 vs. 付费功能

完全免费功能（无需许可证）

文件上传和查看（PDF、DOCX、图片、TIFF、TXT）
相机捕获
文档编辑（文本和图片）
图片编辑（裁剪、旋转、滤镜、调整大小）
拖拽重新排序
合并文档
导出为 PDF 和 Word
撤销/重做
缩略图导航
缩放和平移

扫描仪集成

需要 Dynamic Web TWAIN 试用许可证。

技术概览

库	用途
PDF.js	PDF 渲染
Mammoth.js	DOCX 转 HTML
jsPDF	PDF 生成
html-docx-js	Word 文档生成
html2canvas	HTML 转图片渲染
UTIF.js	TIFF 解码
Dynamic Web TWAIN	扫描仪集成

第一步：HTML 结构

创建 index.html 并写入基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Reader & Editor</title>
    <link rel="stylesheet" href="style.css">
    <script src="lib/pdf.js"></script>
    <script>
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'lib/pdf.worker.min.js';
    </script>
</head>
<body>
    <header>
        <h1>Document Converter & Gallery</h1>
        <p>Convert Word/PDF/Images, Merge, and Save.</p>
    </header>

    <!-- Controls -->
    <section id="controls">
        <button id="uploadBtn">Upload</button>
        <button id="cameraBtn">Camera</button>
        <button id="scannerBtn">Scanner</button>
        <!-- Additional controls -->
    </section>

    <!-- Thumbnails panel -->
    <aside id="thumbnails"></aside>

    <!-- Viewer panel -->
    <main id="viewer"></main>

    <!-- Loading overlay -->
    <div id="loadingOverlay">Processing Document...</div>
</body>
</html>

关键元素

用于上传文件的文件输入
用于捕获图像的相机按钮
用于实体文档扫描的扫描仪按钮
用于导航的缩略图面板
用于显示选中页面的查看器面板
在 DOCX 处理期间提供反馈的加载覆盖层

第二步：CSS 样式

创建 style.css 以实现现代、响应式界面：

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f9;
    color: #333;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

header {
    background-color: #fff;
    border-bottom: 1px solid #dde3e8;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: #007bff;
}

/* Additional styling for controls, workspace, thumbnails, viewer, etc. */