本文档旨在指导开发者如何使用 JsPDF 库，根据图片宽高比动态计算宽度，并将图片添加到 PDF 文档中。我们将提供一个完整的函数示例，并解释可能遇到的问题以及解决方案，确保图片能够正确显示在 PDF 中。通过本文，你将学会如何灵活地处理图片尺寸，并将其无缝集成到你的 PDF 生成流程中。
在使用 JsPDF 向 PDF 文档添加图片时，动态调整图片宽度以保持宽高比是一个常见的需求。以下是一个实现此功能的函数，并附带了详细的说明和注意事项。
实现动态宽度调整的图片添加函数
以下代码展示了如何使用 JsPDF 动态计算图片宽度，并将其添加到 PDF 文档中。
function addImageAutoWidth(doc, image, x, y, height) {
const img = new Image();
img.src = window[image];
img.onload = function() {
const aspectRatio = img.width / img.height;
const width = height * aspectRatio;
doc.addImage(img, 'PNG', x, y, width, height);
doc.save('document.pdf'); // 保存 PDF 文档
};
}代码解释：
-
addImageAutoWidth(doc, image, x, y, height) 函数： 该函数接收五个参数：
- doc: JsPDF 的文档对象。
- image: 包含 base64 数据的全局变量名。
- x: 图片在 PDF 中的 x 坐标。
- y: 图片在 PDF 中的 y 坐标。
- height: 图片在 PDF 中的高度。
- const img = new Image();： 创建一个新的 Image 对象，用于加载图片。
- img.src = window[image];： 将全局变量 image 中存储的 base64 数据赋值给 img.src，从而加载图片。
- img.onload = function() { ... }： 这是一个回调函数，当图片加载完成后执行。
- const aspectRatio = img.width / img.height;： 计算图片的宽高比。
- *`const width = height aspectRatio;`：** 根据给定的高度和宽高比计算图片的宽度。
-
doc.addImage(img, 'PNG', x, y, width, height);： 使用 JsPDF 的 addImage 方法将图片添加到 PDF 文档中。
- img: 要添加的图片对象。
- 'PNG': 图片格式。
- x: 图片的 x 坐标。
- y: 图片的 y 坐标。
- width: 图片的宽度。
- height: 图片的高度。
- doc.save('document.pdf');： 保存 PDF 文档。务必调用 doc.save() 方法，否则 PDF 文档将不会被保存。
调用示例：
const doc = new jsPDF(); const startPos = [10, 10]; // 示例坐标 const currentMonth = "01"; // 示例月份 addImageAutoWidth(doc, "img_months_" + currentMonth, startPos[0], startPos[1], 20);
注意事项：
- JsPDF 对象传递： 确保将 JsPDF 的文档对象 (doc) 作为参数传递给 addImageAutoWidth 函数。这是解决图片不显示问题的关键。
- doc.save() 方法： 在 addImageAutoWidth 函数内部调用 doc.save() 方法，以确保 PDF 文档被正确保存。
- Base64 数据： 确保全局变量 img_months_XX 包含有效的 base64 编码的图片数据。
- 图片加载完成： addImage 方法需要在图片完全加载后才能执行。这就是为什么需要使用 img.onload 事件的原因。
- 坐标系： JsPDF 的默认坐标系原点位于左上角。请根据实际需求调整 x 和 y 坐标。
总结：
通过上述步骤，你可以使用 JsPDF 动态调整图片宽度，并将其添加到 PDF 文档中。关键在于正确传递 JsPDF 对象，并在图片加载完成后执行 addImage 方法，最后调用 doc.save() 保存 PDF 文档。 通过理解和应用这些技巧，可以更有效地使用 JsPDF 生成包含动态图片的 PDF 文档。
