How to Build a Browser-Based PDF Resizer Using JavaScript

如何使用JavaScript构建基于浏览器的PDF缩放工具

2026年6月30日

/

#JavaScript

Bhavin Sheth

PDF文档的页面尺寸多种多样。有些设计用于A4纸张，有些则使用Letter、Legal、Tabloid或自定义尺寸。这在打印、共享、归档或向要求特定页面格式的组织提交文件时可能会引发问题。

PDF缩放工具通过允许用户在不从头创建文档的情况下修改现有PDF的页面尺寸，解决了这个问题。

无论您是在准备商业报告、发票、扫描文档、电子书、演示文稿还是政府表格，调整页面尺寸都能确保文档适应所需纸张尺寸，同时保持专业外观。

在本教程中，您将使用JavaScript构建一个基于浏览器的PDF缩放工具。用户将能够上传PDF文件、预览文档页面、选择预设或自定义页面尺寸、配置缩放行为、添加页面边距，并直接在浏览器中生成缩放后的PDF。

所有操作均通过JavaScript在本地完成，因此上传的文档永远不会离开用户的设备。这提高了隐私性，消除了服务器端处理需求，并提供了更快的体验。

完成本指南后，您将了解基于浏览器的PDF缩放原理，并掌握如何构建一个可扩展的实用工具，进一步添加其他文档编辑功能。

目录

• 为什么PDF缩放很有用
• PDF缩放的工作原理
• 项目设置
• 我们使用了什么库？
• 创建上传界面
• 预览上传的PDF页面
• 配置缩放设置
• 应用缩放
• 生成缩放后的PDF
• 演示：PDF缩放工具的工作方式
• 实际应用中的重要注意事项
• 常见错误避免指南
• 总结

为什么PDF缩放很有用

PDF文件的创建目的多种多样，并非所有文档都使用相同的页面尺寸。演示文稿可能设计为宽屏显示，发票可能使用Letter尺寸，政府申请可能要求A4纸张，工程图纸通常使用Legal或Tabloid格式。

当文档的页面尺寸与要求不匹配时，正确打印可能会变得困难。内容可能出现被截断的情况，可能引入过多的空白区域，或在打印过程中缩放不正确。

PDF缩放工具通过允许用户将页面转换为标准尺寸而无需重新创建文档，有助于解决这些问题。

这在日常使用中尤其有用。企业经常收到使用不同纸张标准的发票和合同。在存储或打印这些文档之前，员工经常将它们调整为一致的格式。

学生经常从不同来源下载讲义、作业、研究论文和电子书。将这些文件转换为通用页面尺寸会使打印和阅读变得更加容易。

在发送艺术品进行商业印刷之前，平面设计师和出版商也会调整PDF尺寸，确保文档与印刷服务所需的尺寸要求一致。

一个实际案例来自电子商务企业。设想一位卖家每天从亚马逊、Flipkart 或 Meesho 等平台接收数百个运单标签。不同电商平台可能使用不同尺寸的纸张生成标签。在批量打印前，卖家可以将每个 PDF 统一调整为 A4 尺寸，确保所有标签打印时保持一致，无需手动调整。

政府机构、银行、教育机构和法律公司也需处理来自多个来源的 PDF 文件。统一页面尺寸可简化文档管理、数字归档、扫描和未来编辑工作。

无需重新创建整个文档，通过调整尺寸功能，用户可快速适配现有 PDF 文件，同时保留原始内容。

PDF 调整尺寸的原理

PDF 调整工具通过修改现有 PDF 文档中一页或多页的尺寸，同时保留页面内容实现功能。

当用户上传 PDF 后，浏览器首先读取文档并提取页面数量、页面尺寸和页面对象等信息。而非直接编辑原始文件，工具会创建新 PDF 并使用选定的页面尺寸，通过指定的缩放方式将每一页复制到新文档中。

根据调整设置，页面内容可采用以下方式适配新尺寸：缩放填充页面、拉伸匹配新尺寸、居中不缩放或裁剪适配选定纸张尺寸。

用户还可选择调整操作适用于所有页面，或仅特定页面范围。这在仅需将文档部分页面转换为其他纸张尺寸时非常实用。

由于所有处理均在浏览器内完成，上传文件在整个工作流程中始终保留在用户设备上。无需将文档发送至外部服务器，使该工具适用于机密报告、合同、发票、教育文件、商业记录和其他敏感文件。

项目搭建

为 PDF 调整工具创建新项目文件夹。

简单项目结构如下：

pdf-resizer/
│── index.html
│── style.css
│── script.js
│── assets/

HTML 文件包含上传区域、页面预览、调整设置和下载部分。

CSS 文件处理整体布局和响应式设计。

JavaScript 文件管理 PDF 加载、页面预览、调整操作和更新文档导出。

保持项目结构清晰，便于后续添加新功能，如裁剪、页面旋转、水印添加、元数据编辑或 PDF 合并。

使用的库

本项目使用 pdf-lib，这是浏览器端创建和编辑 PDF 文档最流行的 JavaScript 库之一。

它允许开发者：

• 读取现有 PDF 文件
• 创建新 PDF 文档
• 在 PDF 之间复制页面
• 调整页面尺寸
• 旋转页面
• 添加文本、图片和图形
• 修改文档元数据
• 导出更新后的 PDF

与许多在线 PDF 服务不同，pdf-lib 完全在浏览器端运行，无需后端服务器。

通过 npm 安装库：

npm install pdf-lib

或直接通过 CDN 引入：

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

加载后，库会暴露 PDFDocument 对象，该对象在应用中被广泛使用。

示例：

const { PDFDocument } = PDFLib;

创建上传界面

第一步是允许用户上传 PDF 文档。

该界面包含一个拖放区域和一个传统的文件选择器，用户可以选择自己喜欢的任意方法进行操作。

当文件被选中后，JavaScript会验证它是否为PDF文件，然后再将其加载到内存中。

以下是一个简单的上传输入示例：

<input
    type="file"
    id="pdfUpload"
    accept="application/pdf"
/>

接下来，监听文件选择事件：

const upload = document.getElementById("pdfUpload");

upload.addEventListener("change", async (event) => {
    const file = event.target.files[0];

    if (!file) return;

    console.log(file.name);
});

读取上传的文件：

const bytes = await file.arrayBuffer();

const pdfDoc = await PDFLib.PDFDocument.load(bytes);

此时，上传的PDF文件已加载到内存中，可以生成预览并进行尺寸调整。

预览上传的PDF页面

文档上传后，下一步是生成页面预览。

显示页面缩略图可以帮助用户在调整尺寸前确认是否选择了正确的文件。

对于多页PDF，预览所有页面也能让用户更清楚地了解调整尺寸操作对文档的影响。

您的工具会为每一页显示缩略图，允许用户在进行任何修改前直观检查PDF内容。

开发者可以使用pdf-lib获取总页数：

const totalPages = pdfDoc.getPageCount();

console.log(totalPages);

获取单个页面：

const pages = pdfDoc.getPages();

pages.forEach((page, index) => {
    console.log(`Page ${index + 1}`);
});

一旦页面可用，应用程序就可以生成预览缩略图并在浏览器中显示。

用户随后可以决定是调整整个文档的尺寸还是仅调整选定的页面。

配置调整尺寸设置

PDF页面加载完成后，用户需要配置文档的调整尺寸方式。

一个灵活的PDF调整工具应支持标准纸张尺寸和自定义尺寸，同时允许用户控制现有内容如何适应新页面。

在此项目中，用户可以选择将调整操作应用于每一页，或者仅应用于特定的页面范围。

对于页面尺寸，工具支持常见的纸张格式，如A4、A5、Letter、Legal、Tabloid和Square。如果这些尺寸无法满足用户需求，也可以输入自定义的宽度和高度值。

另一个重要的设置是内容缩放。根据文档的不同，用户可能希望将现有内容适应页面、拉伸以填充可用空间、保持原始尺寸居中在页面上，或者裁剪内容以匹配所选纸张尺寸。

调整尺寸面板还包含边距控制，允许用户在需要时在文档周围添加额外的间距。

这些设置共同提供了在生成调整尺寸后的PDF之前对最终页面布局的完全控制。

选择预设纸张尺寸

许多用户只是希望将文档转换为常见的纸张格式。

而不是手动输入页面尺寸，工具提供了多个预设的页面尺寸，用户只需单击即可选择。

这些预设在准备打印、商业报告、合同、政府表格、书籍或教育文档时特别有用。

使用自定义页面尺寸

如果标准纸张尺寸不适用，用户可以输入自定义的页面尺寸。

宽度和高度可以通过支持的度量单位进行设置，使文档能够满足精确的打印或出版需求。

"锁定宽高比"选项可确保在调整大小时文档保持原始比例。

选择内容缩放方式

不同文档需要不同的缩放行为。

该工具提供了多种缩放模式，使用户可以选择最适合其文档的布局方式。

例如，"适应页面"在保持比例的同时缩放内容，"拉伸填充"将内容扩展以完全填充页面，"保持原始尺寸（居中）"将原始页面居中显示而不进行缩放，"裁剪填充"则会裁剪超出部分以匹配所选页面尺寸。

示例缩放设置

以下是一个简化的配置对象，用于存储所选的缩放选项。

const resizeOptions = {
    width: 210,
    height: 297,
    unit: "mm",
    scaleMode: "fit",
    applyTo: "all"
};

在生成缩放后的PDF时，会使用这些选定的值。

应用缩放设置

在配置完缩放设置后，应用程序会创建一个新的PDF文档，并使用所选尺寸将每一页复制到新文档中。

在将页面添加到新文档之前，每一页会根据所选纸张尺寸和缩放模式进行调整。

一个简化的示例如下：

const newPdf = await PDFLib.PDFDocument.create();

const copiedPages = await newPdf.copyPages(
    pdfDoc,
    pdfDoc.getPageIndices()
);

copiedPages.forEach(page => {
    page.setSize(595, 842);

    newPdf.addPage(page);
});

上述尺寸代表以PDF点为单位测量的A4页面。

开发人员可以根据所选纸张尺寸替换这些值为自定义尺寸。

所有页面调整大小后，新文档即可准备导出。

生成缩放后的PDF

在处理完所有页面后，更新后的文档将被转换为可下载的PDF格式。

浏览器会创建一个二进制PDF文件并生成临时下载链接，而无需将文档发送到服务器。

保存缩放后的文档非常简单。

const pdfBytes = await newPdf.save();

const blob = new Blob([pdfBytes], {
    type: "application/pdf"
});

const url = URL.createObjectURL(blob);

生成的URL可以附加到下载按钮上。

const link = document.createElement("a");

link.href = url;
link.download = "resized-document.pdf";

link.click();

用户会立即收到带有新选定页面尺寸的更新后文档。

演示：PDF缩放工具的工作原理

第1步：上传您的PDF文件

流程从将PDF文档上传到浏览器开始。

用户可以通过将文件拖放到上传区域，或使用文件选择器选择文档。

选择后，浏览器会验证文件类型并在不将文档上传到服务器的情况下本地加载文档。这使整个缩放过程保持私密性，并确保敏感文档保留在用户的设备上。

第2步：预览上传的PDF页面

在加载PDF后，工具会为整个文档生成页面预览。

显示缩略图使用户能够在进行任何修改之前确认选择了正确的文档。

如果用户只想调整文档的某些部分，还可以选择单个页面。

此预览步骤有助于在生成最终PDF之前避免错误。

步骤3：配置调整大小设置

接下来，用户需要配置文档的调整大小方式。

该工具支持标准纸张尺寸，如A4、A5、Letter、Legal、Tabloid和Square，同时也允许用户自定义完全不同的尺寸。

用户可以指定调整大小操作是应用于所有页面，还是仅限于选定的页面范围。

其他选项包括锁定宽高比、选择页面方向、选择内容缩放模式，以及在必要时添加页面边距。

这些设置在处理开始前为最终文档布局提供了完整的控制能力。

步骤4：生成调整后的PDF

在确认所选选项后，用户只需点击“调整PDF”按钮即可。

浏览器会根据配置的纸张尺寸和缩放方法处理每一页选定的页面。

由于整个操作在本地运行，即使处理大型文档，通常也能在几秒钟内完成，具体时间取决于页面数量。

如果用户需要处理另一个文档，“重新开始”按钮会清除当前会话，并将工具恢复到初始状态。

步骤5：预览调整后的PDF

处理完成后，新生成的PDF会显示在浏览器中。

用户可以在下载文档前查看调整后的页面。

预览区域包含页面导航控件，便于在多页PDF中快速浏览并确认每一页都已正确调整大小。

在下载前检查输出内容有助于发现格式问题，并确保所选页面尺寸和缩放选项产生了预期效果。

步骤6：下载最终PDF

确认调整后的文档后，用户可以下载更新后的PDF。

最终输出部分会显示有用的信息，如输出文件名、总页数和文件大小。

用户还可以在下载前重命名文档，便于处理后整理文件。

“下载PDF”按钮会保存调整后的文档，而“重新开始”按钮允许用户在不刷新页面的情况下上传另一个PDF。

实际使用中的重要注意事项

调整PDF页面大小可以显著提高文档兼容性，但在处理前验证上传文件非常重要。

例如：

if (file.type !== "application/pdf") {
    alert("请上传有效的PDF文件。");
    return;
}

非常大的PDF文件可能需要额外的处理时间，具体取决于页面数量和嵌入的图像数量。

当调整包含数百页的文档时，逐页处理有助于减少内存使用。

在生成最终PDF之前，验证所选页面尺寸也是一个好主意。

console.log(`Selected Size: ${pageSize}`);
console.log(`Scale Mode: ${scaleMode}`);

在下载前预览调整后的文档有助于确保文本、图像和页面布局显示正确。

由于所有操作都在浏览器中完成，上传的文档在整个调整过程中都会保留在用户的设备上。

需要避免的常见错误

一个常见的错误是选择与预期输出不匹配的页面尺寸。

例如，直接将宽屏演示文稿调整为A4纵向可能会导致内容过小或显示压缩。

在处理前始终验证所选的纸张尺寸。

if (pageWidth <= 0 || pageHeight <= 0) {
    alert("无效的页面尺寸。");
}

另一个常见错误是选择了错误的内容缩放模式。

拉伸内容可能导致图像和文字变形，而裁剪可能会从页面中移除重要信息。

在生成最终 PDF 之前，用户应预览不同的缩放模式。

同时，还需要检查缩放操作是应应用于每一页还是仅选定的页面。

const applyMode = "all";

console.log(`Resize Mode: ${applyMode}`);

最后，在下载 PDF 之前，务必仔细检查生成的文件。

花几秒钟检查页面布局、页边距和缩放设置，可以避免之后不必要的重新处理。

结论

在本教程中，你使用 JavaScript 构建了一个基于浏览器的 PDF 缩放工具。

你学习了如何上传 PDF 文件、预览文档页面、配置页面尺寸、调整缩放行为、缩放页面，并直接在浏览器中生成可下载的 PDF 文件。

更重要的是，你了解了现代浏览器如何在不依赖后端服务器的情况下，本地完成 PDF 页面缩放操作。

这种方法使文档处理保持快速、私密且易于使用，同时让用户对最终文档布局拥有完全控制权。

如果你想查看实际示例，可以尝试使用 PDF 缩放工具，探索如何直接在浏览器中调整 PDF 页面大小。

一旦理解了这个工作流程，你可以进一步扩展功能，例如添加页面裁剪、旋转、水印、元数据编辑、页面编号、文档整理和其他高级 PDF 编辑功能。

AllInOneTools.net 的创始人 —— 开发简单、免费、无需登录的网络工具，解决日常问题。我专注于实用工具、SEO、提升效率，并公开发布有用的软件。在构建和推广 AllInOneTools 的过程中，我以实际经验进行写作。

如果你读到这里，请感谢作者，以表达你对他们的支持。说声谢谢

免费学习编程。freeCodeCamp 的开源课程已帮助超过 40,000 人成为开发人员。立即开始

ADVERTISEMENT