如何使用JavaScript构建基于浏览器的PDF页边距设置工具

用户还可以选择是将对页边距的修改应用到所有页面上，还是仅应用到选定的页面范围。对于印刷书籍来说，可以使用“镜像页边距”设置：在内页边距在左右页面之间交替变化，从而为装订留出空间。

在处理完所有选定的页面后，浏览器会生成一份全新的PDF文件，其中包含更新后的页面尺寸和调整后的内容布局。由于整个过程都是在本地完成的，因此在这个过程中不会有任何文件离开用户的计算机。

项目设置

在编写任何JavaScript代码之前，首先为该应用程序创建一个简单的项目结构。

创建一个新的项目文件夹，并添加以下文件：

pdf-add-margins/
│
├── index.html
├── style.css
├── script.js
└── assets/

HTML文件中包含了上传区域、预览功能、页边距设置以及下载接口。

CSS文件用于为应用程序设置样式，并创建在整个项目中统一使用的响应式布局。

JavaScript文件负责处理文件上传、PDF文件的生成与处理、页面渲染、页边距的计算，以及最终更新后的文档的生成。

由于整个流程都是在浏览器内部完成的，因此无需配置后端服务器或安装任何服务器端框架。

我们使用的是哪些库？

这个项目使用了PDF-lib，这是一个非常受欢迎的JavaScript库，它允许用户在浏览器中直接创建和编辑PDF文件。

PDF-lib使开发者能够加载现有的PDF文档、添加新页面、在不同的文档之间复制页面、编辑文档元数据、旋转页面、调整页面大小、裁剪页面、添加页码、插入图片、绘制文本，而且无需依赖任何外部软件就能生成全新的PDF文件。

可以使用npm来安装PDF-lib：

npm install pdf-lib

或者直接从CDN链接在HTML页面中引入该库：

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

const {
  PDFDocument
} = PDFLib;

在整个教程中，PDF-lib将会负责加载用户上传的文档、设置新的页面尺寸、根据用户选择的页边距重新调整页面内容的位置，最终生成完成的PDF文件。

创建上传接口

用户首先会使用的功能就是上传接口。这个简单直观的上传区域让用户可以通过拖放操作或传统的文件选择器轻松地选中PDF文件。

在这个项目中，上传区域只接受PDF格式的文件。一旦选中了有效的文件，浏览器会立即开始加载该文件，并为其后续的预览和页边距编辑做好准备。

<上传组件同时也是整个工作流程的起点。后续进行的所有操作（页面预览、边距设置、页面选择以及PDF文件的生成）都依赖于已上传的文件。>

由于该应用程序完全在浏览器内部运行，因此上传的PDF文件永远不会离开用户的电脑。这种方式既提高了隐私性，又缩短了处理时间。

以下是一个简单的文件上传字段示例：

<div class="upload-box">
    <input
        type="file"
        id="pdfFile"
        accept=".pdf,application/pdf"
        hidden
    >

    <button id="selectPDF">
        选择PDF文件
    <>/button>
</div>

需要使用JavaScript将上传按钮与文件输入框关联起来：

const input = document.getElementById("pdfFile");
const button = document.getElementById("selectPDF");

button.addEventListener("click", () => {
    input.click();
});

input.addEventListener("change", async (event) => {

    const file = event.target.files[0];

    if (!file) return;

    const bytes = await file.arrayBuffer();

    console.log("PDF文件已加载成功", bytes);

});

现在，上传的PDF文件已经可以用来生成页面预览图，也可以用于设置页边距了。

上传界面演示

预览上传的PDF页面

一旦PDF文件成功上传，下一步就是查看它的各个页面了。

显示页面预览图可以让用户在进行任何修改之前确认自己选择的确实是正确的文档。同时，用户也可以仔细查看每一页，从而决定是应为整个文档设置页边距，还是只针对特定页面进行调整。

在这个项目中，每一页都会被渲染成缩略图形式。用户可以快速浏览整个文档，并在调整任何设置之前先确认页面的顺序是否正确。

对于篇幅较长的文档来说，使用缩略图预览图进行导航要比一次显示整页内容方便得多。

浏览器会直接从上传的PDF文件中渲染出每一页的内容，而无需将文件发送到服务器。

在加载完文档后，可以逐页查看其中的内容。

const pdfDoc = await PDFDocument.load(pdfBytes);

const pages = pdfDoc.getPages();

console.log("总页数:", pages.length);

随后，这些页面会被显示在预览界面中。

pages.forEach((page, index) => {

    console.log(`正在渲染第${index + 1}页`);
});

当预览图生成完成后，用户就可以继续配置页边距设置了。

预览演示

配置边距设置

在验证上传的文档后，用户可以自行设定边距的具体值。

该工具并不为所有文档统一应用相同的边距设置，而是提供了多种选项，以便适应不同的打印、出版和商务工作流程。

用户可以为上下左右边距输入自定义数值。这些数值可以根据实际需求以毫米、像素或英寸为单位进行设置。

对于那些不想手动计算数值的用户，该应用程序还提供了预设的边距选项，如“无”、“窄”、“正常”和“宽”等。

该工具支持为所有页面应用边距设置，也可以仅针对特定页面范围进行设置。当只有某些页面需要额外的间距时，这种功能尤为实用。

对于印刷书籍和手册来说，还可以启用“对称边距”选项，这样左右页面的内边距就会自动设置为相反的值，从而便于装订。

用户还可以选择边距的应用方式：扩大页面尺寸可以在保持内容尺寸不变的情况下增加整体页幅；或者保持原有页面尺寸，然后重新调整内容的布局位置。

所有这些设置都在开始处理文档之前完成配置，因此用户可以提前预览并调整各项参数。

示例边距设置：

const marginSettings = {

    top: 25.4,

    bottom: 25.4,

    left: 25.4,

    right: 25.4,

    unit: "mm",

    applyTo: "all",

    mirrorMargins: false,

    preset: "Normal",

    resizeMode: "Expand Page Size"

};

选定的参数值将在生成更新后的PDF页面时被实际应用。

边距设置演示

应用边距设置

一旦边距设置完成，应用程序就可以开始处理PDF文件了。

该工具并不会直接修改原始文档，而是会根据用户选定的边距参数创建新的页面布局，然后将现有内容重新排列到新计算出的页面尺寸范围内。

这种处理方式能够在保留原始文档内容的同时，生成一个新的PDF文件，并在内容周围添加额外的空白区域。

根据所选择的页面大小调整模式，应用程序要么会扩大页面尺寸以适应新的边距设置，要么会保持原有页面尺寸，只是重新安排内容的布局位置。

对于包含多页的文档来说，相同的设置可以应用于所有页面，也可以仅针对特定的页面范围进行应用。

const pages = pdfDoc.getPages();

pages.forEach((page) => {

    const { width, height } = page.getSize();

    const newWidth = width + leftMargin + rightMargin;

    const newHeight = height + topMargin + bottomMargin;

    page.setSize(newWidth, newHeight);

});

page.translateContent(
    leftMargin,
    bottomMargin
);

这样就可以确保文档内容能够移动到正确的位置，同时页面边缘也会保留所需的边距。

应用边距演示

生成更新后的PDF文件

一旦所有选定的页面都完成了处理，浏览器就会生成一份新的PDF文件，其中会包含更新后的页面尺寸和边距设置。

原始的PDF文件保持不变，而修改后的文档则会准备好供用户下载。

由于整个处理过程都是在本地进行的，因此即使对于多页文档来说，生成新PDF的速度也通常非常快。

处理完成后，更新后的PDF文件会被转换成可供下载的二进制数据。

const pdfBytes = await pdfDoc.save();

之后就可以创建一个Blob对象来用于下载了。
const blob = new Blob(
    [pdfBytes],
    {
        type: "application/pdf"
    }
);

const url = URL.createObjectURL(blob);


最后，浏览器会开始执行下载操作。
const link = document.createElement("a");

link.href = url;

link.download = "updated-document.pdf";

link.click();


在下载之前，用户还可以预览生成后的PDF文件。
用户可以查看更新后的文档内容、重新命名输出文件、了解总页数、检查最终文件大小，如果对结果满意的话，就可以直接下载完成的PDF文件了。
更新后的PDF预览

演示：添加边距工具的工作原理
步骤1：上传您的PDF文件
整个流程首先需要通过拖放功能或文件选择器来上传PDF文件。
一旦选定了文件，浏览器会验证该文件是否为PDF格式，并将其加载到本地。由于所有的处理操作都在浏览器内部完成，因此文档永远不会离开用户的设备，这使得这款工具非常适合用于处理保密报告、合同、发票等敏感文件。
文件成功加载后，应用程序会准备文档，以便进行预览生成和边距编辑操作。

步骤2：预览已上传的PDF页面
文档上传完成后，应用程序会直接在浏览器中生成页面预览。
显示页面缩略图可以让用户在进行任何修改之前确认是否选对了正确的文件。对于较大的PDF文件，预览功能还能帮助用户更轻松地浏览文档并查看各个页面。
这个步骤有助于在应用边距设置之前避免出现错误。

步骤3：配置边距设置
接下来，用户可以设置文档的边距值。
该工具允许用户自定义上边距、下边距、左边距和右边距的值，同时也提供了“无”、“窄”、“正常”和“宽”等预设选项。
用户可以选择是将边距应用到所有页面上，还是仅应用到选定的页面范围。对于需要装订的书籍或文档，还可以使用“对称边距”设置。
另一个有用的功能是让用户决定应用程序是应该调整整体页面大小，还是在保持原始页面尺寸的前提下重新排列现有内容。
这些设置使用户能够完全控制最终文档的外观效果。



步骤4：应用边距设置
在确认了所有设置内容后，用户只需点击添加边距按钮即可完成操作。
浏览器会处理每一页被选中的内容，计算出新页面的尺寸，重新安排原有内容的布局，然后生成一份更新后的PDF文件，在每一页周围都会保留用户所设定的间距。
如果用户想要处理另一份文档，点击重新开始按钮即可清除当前会话内容，而无需刷新页面。

步骤5：预览更新后的PDF
处理完成后，更新后的文档会显示在浏览器中。
用户可以在下载之前查看每一页的内容，以确保边距设置正确无误。
预览界面还提供了页面导航功能，方便用户浏览多页文档，并确认所有选中的页面都已成功处理。
在下载前先审核文档内容，有助于及时发现格式问题，从而避免后续需要进行额外的修改。
步骤6：下载最终的PDF文件
确认文档内容无误后，用户就可以下载最终生成的PDF文件了。
输出信息栏会显示文件名、总页数和文件大小等有用信息。用户在下载之前可以重新命名文档文件，这样更便于管理文件。
当所有内容都符合要求时，就可以下载更新后的PDF文件，立即用于打印、分享、装订、归档，或提交给那些有特定边距要求的机构。

实际使用中的重要提示
设置边距通常是一个简单的操作，但那些包含数百页内容或高分辨率图片的大型PDF文件可能需要更长的处理时间。
在开始处理之前，先验证上传的文件格式是正确的是个好习惯。
if (file.type !== "application/pdf") {
    alert("请上传有效的PDF文件。");
    return;
}

在处理大型文档时，在生成最终PDF之前，请务必确认所选的边距值是否合适。
console.log(`上边距：${topMargin}`);
console.log(`下边距：${bottomMargin}`);
console.log(`左边距：${leftMargin}`);
console.log(`右边距：${rightMargin}`);

如果该文档是用于打印的，那么在下载之前请先预览生成的PDF文件，确保文字、表格、图片和页码的位置都正确无误。
由于所有的处理操作都是在本机进行的，因此在整个工作流程中，文档始终保存在用户的设备上。这种基于浏览器的边距设置功能非常适用于合同、发票、财务报告、法律文件、教育记录、医疗表格等各类需要保密处理的PDF文件。
需要避免的常见错误
一个常见的错误是设置过大的边距值，这样会不必要地减少可打印区域。
在生成更新后的文档之前，务必核对所选择的各项参数。
if (leftMargin < 0 || rightMargin < 0) {
    alert("边距值不能为负数。");
}

另一个错误是忘记选择正确的页面显示模式。
有时只有第一页或特定的页面范围需要调整边距，而文档的其他部分则保持不变。
const applyTo = "all";

console.log(`应用边距到：${applyTo}`);

用户还应该确认“放大页面尺寸”还是“保持原始页面尺寸”更符合自己的工作需求。选择错误的模式可能会影响文档打印或分享后的最终布局。
最后，在下载生成的PDF文件之前，一定要仔细检查其内容。
花几分钟时间查看更新后的页面，可以确保间距设置正确、页面内容对齐得当，从而确保文档可以顺利进行打印、装订、归档或分发。
结论
通过本教程，您使用JavaScript开发了一个基于浏览器的PDF边距调整工具。
您学会了如何上传PDF文件、预览页面内容、配置自定义边距设置、为选定的页面添加边距，以及直接在浏览器中生成更新后的PDF文件。
更重要的是，您了解到现代浏览器能够在无需后端服务器的情况下完成PDF页面布局的修改。
这种处理方式使得文档操作更加快速、私密且易于使用，同时让用户能够完全控制页面间距的设置。
您可以在这里尝试这个工具的实际效果：AllInOneTools - PDF边距调整工具。
一旦掌握了这种工作流程，您还可以进一步为其添加更多功能，比如页面裁剪、尺寸调整、页码生成、水印添加、文档整理、元数据编辑等高级PDF处理功能。