如何使用 JavaScript 在浏览器中将图片转换为 PDF——逐步指南

无论是扫描文件、截图、收据、笔记、证书还是多张照片，用户通常都需要一种快速将图片合并为可下载 PDF 的方式。

现代浏览器让这一过程比以往更加简单。

不再需要将文件上传到服务器，我们如今可以直接在浏览器中使用 JavaScript 处理图片。这使得工具运行更快、更私密，也更易于使用。

在本教程中，你将使用 JavaScript 构建一个基于浏览器的图片转 PDF 转换器。

该工具支持上传多个图片、排序文件、选择方向和页面尺寸、设置页边距，并可将图片合并为单个 PDF 或多个独立的 PDF 文件。用户还可以在浏览器中预览并直接下载生成的文档。

所有操作均在客户端完成，无需任何后端支持。

目录

1. 图片转 PDF 的工作原理

1. 项目设置

1. 我们使用的是哪个库？

1. 创建上传界面

1. 读取上传的图片

1. 生成 PDF

1. 处理多张图片

1. 配置 PDF 设置

1. 重命名并下载 PDF

1. 演示：图片转 PDF 工具如何工作

1. 来自真实使用场景的重要注意事项

1. 应避免的常见错误

1. 结论

图片转 PDF 的工作原理

浏览器本身无法直接将图片组合成 PDF。

因此，我们将使用一个 JavaScript PDF 库，它能够创建页面、插入图片，并将所有内容导出为可下载的 PDF 文档。

当用户上传一张或多张图片后，流程开始启动。JavaScript 会读取图片数据并准备用于 PDF 生成。随后，工具创建 PDF 页面，将上传的图片插入其中，最后将全部内容导出为可下载的 PDF 文档。

整个过程都在浏览器本地完成。

这意味着用户无需将敏感文件上传至服务器，从而让整个过程更快且更注重隐私保护。

项目设置

本项目设计得非常简洁。

你只需要：

• 一个 HTML 文件
• 一个 JavaScript 文件
• 一个 PDF 库

无需后端或数据库。

我们使用的是哪个库？

我们将使用 jsPDF 库。它允许我们在 JavaScript 中直接生成 PDF 文件。

通过 CDN 添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

加载完成后，我们就可以直接从浏览器创建并导出 PDF 文件。

创建上传界面

从一个基础的上传区域开始：

<input type="file" id="upload" multiple accept="image/*">

<button onclick="convertToPDF()">
  转换为 PDF
</button>

这允许用户上传多张图片并生成 PDF。

以下是该工具中上传部分的界面效果：

你还可以进一步扩展界面，添加排序、页面设置、页边距和合并模式等控制选项。

读取上传的图片

当用户选择文件后，我们需要在 JavaScript 中读取这些文件。

可以使用 FileReader 来实现：

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

const files = fileInput.files;

for (const file of files) {
  const reader = new FileReader();

  reader.onload = function (e) {
    const imageData = e.target.result;

    console.log(imageData);
  };

  reader.readAsDataURL(file);
}

这会将上传的图片转换为可读的 Base64 数据，以便后续插入到 PDF 中。

生成 PDF

现在我们可以创建 PDF 文档了。

const { jsPDF } = window.jspdf;

const pdf = new jsPDF();

PDF 创建完成后，即可在页面中插入图片：

pdf.addImage(imageData, "JPEG", 10, 10, 180, 120);

这将在 PDF 页面的特定位置和尺寸插入上传的图像。

最后，导出文档：

pdf.save("images.pdf");

这将立即下载生成的 PDF 文件。

处理多张图片

当用户上传多个文件时，每张图片可以自动添加到独立的 PDF 页面中。

例如：

files.forEach((file, index) => {

  if (index !== 0) {
    pdf.addPage();
  }

});

这会在插入下一张图片前创建新页面。

在某些情况下，用户也可能希望在同一页面上放置多张图片，而不是每页仅放一张。

例如：

pdf.addImage(img1, "JPEG", 10, 20, 80, 80);

pdf.addImage(img2, "JPEG", 110, 20, 80, 80);

这使得画廊、报告或分组文档的布局更加灵活。

配置 PDF 设置

在生成最终 PDF 之前，用户可以自定义多种布局和输出设置。

这些设置可提升文档质量，并让用户对生成的文件拥有更多控制权。

以下是工具内部配置面板的示例：

图片排序

上传多张图片后，正确组织它们变得尤为重要。

用户可能希望按字母顺序排序、反转顺序，或根据文件大小进行排列。

例如，可以按字母顺序对图片进行排序：

files.sort((a, b) => a.name.localeCompare(b.name));

也可以按文件大小排序：

files.sort((a, b) => a.size - b.size);

以下是工具内排序选项的示例：

这有助于用户在转换为 PDF 前更高效地整理文档。

选择页面方向

不同图片在不同页面方向下表现更佳。

纵向方向适合竖向图片，而横向方向则更适合较宽的图片。

例如：

const pdf = new jsPDF({
  orientation: "portrait"
});

必要时也可切换为 "landscape"。

以下是工具内方向选项的示例：

选择页面尺寸

PDF 页面尺寸控制生成文档的尺寸。

例如：

const pdf = new jsPDF({
  unit: "mm",
  format: "a4"
});

这会使用毫米单位创建一个 A4 尺寸的 PDF 文档。

其他格式如 letter、legal 或自定义页面尺寸也均可支持。

以下是工具内选择页面尺寸选项的示例：

添加边距

边距在图像与页面边缘之间创建间距。

如果没有边距，图像可能会紧贴边界，显得拥挤。

例如：

const margin = 10;

pdf.addImage(imageData, "JPEG", margin, margin, 180, 120);

以下是工具内边距选项的示例：

这为插入的图像创造了更整洁的间距。

自动图像适配

从图像生成 PDF 时，常见的问题是尺寸不正确。

如果以固定尺寸插入图像，可能导致图像拉伸、超出页面范围或失真。

更好的做法是动态计算图像尺寸。

例如：

const pageWidth = pdf.internal.pageSize.getWidth();

const imgWidth = pageWidth - 20;

const imgHeight = (image.height * imgWidth) / image.width;

pdf.addImage(imageData, "JPEG", 10, 10, imgWidth, imgHeight);

这能自动按比例缩放图像，同时保持边距和布局的一致性。

合并选项

一个实用功能是支持不同的输出模式。

例如，用户在创建报告、笔记或合并文件时，可能希望将所有上传的图片合并成一个 PDF。

而在某些情况下，用户可能更倾向于为每张图片生成独立的 PDF，而不是全部合并。这在导出单个文档或扫描页时非常有用。

自定义分组是另一个有用的选项，因为它允许用户根据自己的安排或分类，将选定的图片组合成多个 PDF。

这些不同的输出模式使该工具在各种实际应用场景中更具灵活性。

一个简单的下拉菜单即可实现：

<select id="mergeMode">
  <option>合并所有为单个 PDF</option>
  <option>创建独立的 PDF</option>
  <option>自定义分组</option>
</select>

一旦选定，JavaScript 可根据所选模式应用不同的生成逻辑。

以下是工具内合并模式选项的示例：

这使工具在处理不同文档工作流时更加灵活。

重命名并下载 PDF

生成文档后，用户可能希望在下载前重命名文件。

你可以通过如下方式提示输入文件名：

const fileName = prompt("请输入 PDF 名称:", "images");

pdf.save(`${fileName}.pdf`);

这使用户对导出文件拥有更多控制权。

以下是工具内重命名弹窗的示例：

演示：图像转 PDF 工具的工作原理

第一步：上传图片

用户将一个或多个图像文件上传到基于浏览器的工具中。

该工具支持 JPG、PNG 和 WEBP 等常见格式。

第二步：配置 PDF 设置

用户可在生成 PDF 前自定义布局设置。

包括：

• 图片排序
• 方向（纵向/横向）
• 页面大小
• 边距
• 合并模式

这些设置有助于生成更清晰整洁的 PDF 输出。

第三步：生成 PDF

设置完成后，用户点击“转换”按钮。

浏览器会在本地处理所有上传的图像，并立即生成 PDF。

第四步：重命名生成的文件

下载前，用户可以重命名生成的 PDF 文件。

这在导出多个文档时有助于更好地组织文件。

第五步：下载 PDF

最后，生成的 PDF 可直接在浏览器中下载。

整个过程无需将文件上传至任何服务器。

来自真实使用场景的重要提示

处理大尺寸图像时，性能和内存占用会变得尤为重要。

大图像可能导致 PDF 生成变慢，并产生不必要的大文件。

例如，可以在处理前限制上传文件大小：

const MAX_SIZE = 10 * 1024 * 1024;

if (file.size > MAX_SIZE) {
  alert("图像过大。");
  return;
}

另一个有用的优化是：在插入 PDF 之前先调整图像大小。

例如：

const canvas = document.createElement("canvas");

const ctx = canvas.getContext("2d");

canvas.width = image.width * 0.5;
canvas.height = image.height * 0.5;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

const resizedImage = canvas.toDataURL("image/jpeg", 0.7);

这能在生成 PDF 前减小图像尺寸并降低压缩质量。

同时也能减少内存使用，提升大文件的 PDF 生成速度。

由于所有操作都在浏览器内部完成，上传的图像永远不会离开用户的设备，从而提升了隐私安全性。

常见错误及避免方法

一个常见错误是未在处理前验证上传的文件。

例如，用户可能上传了不支持的格式，或在未选择图像的情况下尝试生成 PDF。

务必在处理前验证输入：

if (!fileInput.files.length) {
  alert("请先上传图像。");
  return;
}

另一个问题是未调整大小就直接插入超大图像。

大图像会导致生成的 PDF 过大，显著降低性能。

错误的图像定位也很常见。

如果尺寸硬编码错误，图像可能会超出页面范围或发生变形。

使用动态图像尺寸和边距可有效避免此类布局问题。

总结

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

你学习了如何上传图像、生成 PDF 文档、配置布局设置，并在浏览器内直接导出文件。

更重要的是，你了解到现代浏览器能够完全在本地处理文档生成，无需依赖后端服务器。

这种方案使工具运行更快、更私密，且易于使用。

一旦掌握这一工作流程，你可以进一步扩展功能，如压缩、拖拽排序、添加水印、批量导出或高级 PDF 编辑工具。

你也可以在此体验完整可用版本：

https://allinonetools.net/image-to-pdf-converter/

而真正有趣的内容，才刚刚开始。

• * *

• * *

免费学习编程。freeCodeCamp 的开源课程已帮助超过 40,000 人获得开发岗位。立即开始