本文介绍了如何使用 JsPDF 库动态计算图片宽度，并将其添加到 PDF 文档中。通过封装一个可复用的函数，可以方便地根据图片高度和宽高比自动调整图片宽度，避免手动计算的繁琐。文章提供了完整的代码示例，并指出了常见错误和注意事项，帮助开发者快速实现图片添加功能。
在使用 JsPDF 生成 PDF 文档时，经常需要在文档中添加图片。如果需要根据图片的高度自动调整宽度，可以封装一个函数来实现这个功能。以下提供了一个详细的教程，展示如何使用 JsPDF 动态调整图片宽度并将其添加到 PDF 中。
核心代码实现
首先，我们需要创建一个函数，该函数接收 JsPDF 文档对象、图片数据、图片在 PDF 中的 x 和 y 坐标，以及图片的高度作为参数。函数内部会计算图片的宽度，然后使用 doc.addImage() 方法将图片添加到 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, y (坐标), 和 height (图片高度) 作为参数。
- const img = new Image();: 创建一个 Image 对象，用于加载图片。
- img.src = window[image];: 将全局变量 image 对应的 base64 数据赋值给 img.src，启动图片加载。 window[image] 用于访问全局变量，例如 window["img_months_01"]。
- img.onload = function() { ... }: 定义一个回调函数，在图片加载完成后执行。
- const aspectRatio = img.width / img.height;: 计算图片的宽高比。
- *`const width = height aspectRatio;`**: 根据给定的高度和宽高比计算图片的宽度。
- doc.addImage(img, 'PNG', x, y, width, height);: 使用 doc.addImage() 方法将图片添加到 PDF 中。 'PNG' 指定图片格式，x 和 y 是图片的坐标，width 和 height 是图片的宽度和高度。
- doc.save('document.pdf');: 保存 PDF 文档。
使用示例
假设我们有一个名为 img_months_01 的全局变量，其中包含图片的 base64 数据。我们可以这样调用 addImageAutoWidth 函数：
const doc = new jsPDF(); // 创建 JsPDF 对象 const startPos = [10, 10]; // 定义起始坐标 addImageAutoWidth(doc, "img_months_01", startPos[0], startPos[1], 20);
注意事项
- 确保 doc 对象正确传递： 务必将 JsPDF 文档对象 doc 作为参数传递给 addImageAutoWidth 函数。 这是最常见的错误来源。
- 图片数据加载： img.onload 确保图片数据完全加载后再进行后续计算和添加操作。
- 全局变量： 使用 window[image] 访问全局变量时，请确保该变量已正确定义并包含有效的 base64 数据。
- 保存 PDF： 在 addImageAutoWidth 函数内部调用 doc.save() 方法保存 PDF。
完整示例
<!DOCTYPE html>
<html>
<head>
<title>JsPDF Add Image Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
// 模拟 base64 数据，实际项目中应替换为真实的 base64 数据
window.img_months_01 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+r8jUAYGcgAAAABJRU5ErkJggg==";
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');
};
}
function generatePdf() {
const doc = new jspdf.jsPDF();
const startPos = [10, 10];
addImageAutoWidth(doc, "img_months_01", startPos[0], startPos[1], 20);
}
</script>
</head>
<body>
<button onclick="generatePdf()">Generate PDF</button>
</body>
</html>总结
通过封装 addImageAutoWidth 函数，可以方便地根据图片高度自动调整宽度，并将其添加到 PDF 文档中。 确保正确传递 doc 对象，并处理好图片加载完成后的回调函数，即可避免常见错误。 该方法简化了图片添加过程，提高了代码的可维护性和可重用性。
