使用 React 和 pdf-lib 构建无服务器 PDF 合并与编辑器（无需后端）

Source: Dev.to

介绍

我大约每周合并两次 PDF。次数不足以支付 Adobe 订阅费用，却又经常被在线工具烦扰。

你一定很熟悉这种流程：

• 在 Google 上搜索 “merge pdf free”。
• 把你的私人银行对账单上传到随机服务器。
• 当你正想下载结果时，弹出 “Daily Limit Reached” 的提示。

我受够了。现代浏览器和 WebAssembly 已经足够快，能够在客户端处理 PDF 操作，后端已经不再必要。我构建了 Simple VaultPDF 来解决这个问题。

技术栈

• 框架: React (Vite)
• PDF 引擎: pdf-lib（用于合并/拆分）& pdf.js（用于渲染）
• OCR: tesseract.js
• 状态管理: 仅使用 React Hook，保持简洁。

代码（工作原理）

import { PDFDocument } from 'pdf-lib';

const mergeFiles = async (files) => {
  const mergedPdf = await PDFDocument.create();

  for (const file of files) {
    const fileBuffer = await file.arrayBuffer();

    const pdf = await PDFDocument.load(fileBuffer);

    const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());

    copiedPages.forEach((page) => mergedPdf.addPage(page));
  }

  const pdfBytes = await mergedPdf.save();
  return pdfBytes;
};

为什么选择本地优先？

• 零服务器成本: 不在 AWS 或云函数上进行处理。
• 隐私: 数据永远不离开用户机器，无需信任第三方服务器。
• 速度: 消除上传/下载的延迟。

结果

我已经将扩展发布到 Chrome 网上应用店。如果你厌倦了付费墙，或想看看 pdf-lib 在真实扩展中的表现，欢迎尝试。

Chrome 网上应用店的 Simple VaultPDF

如果发现任何 bug，请告诉我——我仍在为大文件优化内存使用。

祝编码愉快！