PDF文档有多种不同的页面尺寸。有些文档是为A4纸格式设计的，而另一些则采用Letter、Legal、Tabloid或自定义的尺寸。当需要打印、共享、归档这些文档，或者向要求使用特定页面格式的组织提交它们时，这种差异就会引发问题。
PDF尺寸调整工具能够解决这个问题，因为它允许用户在不重新创建整个文档的情况下，更改现有PDF文件的页面尺寸。
无论您是在准备商务报告、发票、扫描文件、电子书、演示文稿还是政府表格，调整页面尺寸都能确保文档符合所需的纸张规格，同时保持专业的外观。
在本教程中，您将使用JavaScript制作一个基于浏览器的PDF尺寸调整工具。用户可以通过该工具上传PDF文件、预览文档页面、选择预设或自定义的页面尺寸、配置缩放规则、设置页边距，并直接在浏览器中生成调整后的PDF文件。
所有操作都是通过JavaScript在本地完成的，因此上传的文档永远不会离开用户的设备。这种方式既保护了用户隐私，也避免了服务器端的处理过程，从而提供了更快捷的使用体验。
读完本教程后，您将了解基于浏览器的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，这是一个非常流行的JavaScript库，可以在浏览器中直接创建和编辑PDF文件。
它使开发者能够：
-
读取现有的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(`第${index + 1}页`);
});
一旦获取到了所有页面内容，应用程序就可以生成预览缩略图，并在浏览器中显示它们。
用户随后可以决定是调整整个文档的大小，还是只调整部分页面的大小。
配置调整大小的相关设置
当PDF页面被加载完成后，用户需要配置文档的大小调整方式。
一个功能完善的PDF调整大小工具应该同时支持标准的纸张尺寸和自定义的尺寸设置，并且要允许用户控制现有内容在新页面中的布局方式。
在这个项目中，用户可以选择是对所有页面都应用大小调整操作，还是只针对特定的页面范围进行操作。
对于页面尺寸，该工具支持A4、A5、Letter、Legal、Tabloid和Square等常见的纸张格式。如果这些格式都不能满足用户的需要，用户也可以手动输入自定义的宽度和高度值。
另一个重要的设置是内容缩放方式。根据文档的具体情况，用户可以选择将现有内容适配到页面中，或者将其拉伸以填满整个页面空间，也可以保持内容原来的大小并将其居中显示在页面上，或者裁剪内容使其符合所选的纸张尺寸。
调整大小工具还提供了边距设置功能，用户可以根据需要为文档添加额外的间距。
综上所述，这些设置共同让用户能够在生成调整大小后的PDF文件之前，完全掌控最终的页面布局。
选择预设的纸张尺寸
许多用户只是想将文档转换为常见的纸质格式。
该工具提供了多种预定义的页面尺寸，用户只需点击一下即可选择所需的尺寸，而无需手动输入页面规格。
在准备用于打印的PDF文件、商业报告、合同、政府表格、书籍或教育资料时，这些预设选项尤为实用。
使用自定义页面尺寸
如果标准纸张尺寸不适合需求，用户可以输入自定义的页面规格。
用户可以使用支持的测量单位来指定宽度和高度，从而确保文档符合具体的打印或出版要求。
锁定纵横比选项可保证文档在调整大小时保持原有的比例关系。
选择内容缩放方式
不同的文档需要不同的缩放处理方式。
该工具提供了多种缩放模式，用户可以根据自己的需求为文档选择最合适的缩放方式。
例如，适应页面大小会保持内容的比例关系进行缩放；拉伸以填充整个页面则会将内容完全展开以填满页面；保持原始大小（居中显示）则会在不改变尺寸的情况下将文档置于页面中央；而裁剪以适应页面大小则会去除超出页面范围的多余内容。
示例缩放设置
以下是一个简化的配置对象，用于存储用户选择的缩放选项。
const resizeOptions = {
width: 210,
height: 297,
unit: "mm",
scaleMode: "fit",
applyTo: "all"
};
用户选择的这些参数会在生成新的PDF文件时被用到。
应用缩放设置
在完成缩放设置后，应用程序会创建一个新的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);
生成的链接可以直接添加到下载按钮上。
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(`选定的页面尺寸：${pageSize}`);
console.log(`缩放模式：${scaleMode}`);
在下载之前预览调整大小后的文档，可以确保文本、图片和页面布局都能正确显示。
由于整个调整大小的过程都是在浏览器中完成的，因此上传的文件在整个处理过程中都会保留在用户的设备上。
需要避免的常见错误
一个常见的错误就是选择的页面尺寸与预期的输出结果不符。
例如，将一份宽幅演示文稿直接调整为A4竖版格式，可能会导致内容显示得过小或者看起来被压缩了。
在处理文件之前，请务必确认所选的纸张尺寸是否正确。
if (pageWidth <= 0 || pageHeight <= 0) {
alert("页面尺寸无效。");
}
另一个常见的错误是选择了错误的内容缩放模式。
如果选择“拉伸”模式，图像和文字可能会变形；而如果选择“裁剪”模式，页面上的一些重要信息可能会被删除。
在生成最终的PDF文件之前，用户应该先尝试不同的缩放模式来看看效果如何。
另外，还需要确认是应对所有页面进行大小调整，还是只针对部分页面进行调整。
const applyMode = "all";
console.log(`缩放模式：${applyMode}`);
最后，在下载之前一定要仔细检查生成的PDF文件是否合格。
花几秒钟时间检查页面布局、边距以及缩放效果，可以帮助避免以后出现不必要的重新处理工作。
结论
在本教程中，您使用JavaScript构建了一个基于浏览器的PDF缩放工具。
您学习了如何上传PDF文件、预览文档页面、设置页面尺寸、调整缩放比例、重新调整页面大小，以及如何在浏览器中直接生成可供下载的PDF文件。
更重要的是，您了解了现代浏览器是如何在无需后端服务器的情况下本地完成PDF页面大小的调整的。
这种处理方式能够保证文档处理的效率，同时保护用户隐私，并使操作更加便捷；同时，用户也可以完全控制最终生成的文档布局。
如果您想查看实际演示效果，可以尝试使用PDF缩放工具，亲自体验如何在浏览器中直接调整PDF页面的大小。
一旦掌握了这种操作流程，您还可以进一步为其添加更多功能，比如裁剪页面、旋转图片、添加水印、编辑元数据、为页面添加编号、整理文档结构等等，从而实现更高级的PDF编辑功能。