PDF 加边距工具：零基础浏览器端实现教程

学习用 JavaScript 在浏览器中创建 PDF 加边距工具，无需安装软件，保护隐私。

准备工作

你需要：

一个现代浏览器（如 Chrome、Edge 或 Firefox）
一个文本编辑器（如 VS Code 或记事本）
基础的 HTML 和 JavaScript 知识（了解变量和函数即可）

本教程使用 PDF-lib 库，它能在浏览器中直接修改 PDF，无需服务器。

安装步骤

我们通过 CDN 引入 PDF-lib，无需下载任何文件。

创建一个新文件夹，命名为 pdf-margin-tool。
在文件夹内创建 index.html，写入基本 HTML 结构。
在 <head> 中添加 CDN 链接：<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
创建 script.js 文件，并在 HTML 末尾引用。

注意：如果网络受限，可以下载 pdf-lib 的 npm 包，但 CDN 方式最简单。

编写核心代码

在 script.js 中，我们将实现以下功能：

用户上传 PDF
读取文件并加载到 PDF-lib
添加边距（例如上下左右各 20 像素）
导出新 PDF

以下是一个基础示例：

const { PDFDocument } = PDFLib;

async function addMargins(pdfBytes) {
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();
  pages.forEach(page => {
    const { width, height } = page.getSize();
    const margin = 20;
    page.setSize(width + 2*margin, height + 2*margin);
    page.translateContent(margin, margin);
  });
  return pdfDoc.save();
}

这段代码会：

加载 PDF
遍历所有页面
将页面尺寸扩大（增加边距）
移动原有内容到新位置

注意：translateContent 会移动整个页面的内容，确保边距均匀。

验证与下一步

运行 index.html，上传一个 PDF 测试。如果下载的 PDF 四周有空白边距，说明成功。

常见问题：

如果边距不对称，检查 translateContent 参数。
如果页面内容变形，确保 setSize 时保持比例。

接下来，你可以：

添加用户输入框，让用户自定义边距值
支持选择特定页面
添加预览功能

内容来源

freeCodeCamp

发布时间

2026-07-03 01:30