使用 JsPDF 动态调整图片宽度并添加到 PDF 的正确方法-js教程-PHP中文网

使用 JsPDF 动态调整图片宽度并添加到 PDF 的正确方法

心靈之曲

发布： 2025-09-15 21:20:01

原创

523人浏览过

使用 jspdf 动态调整图片宽度并添加到 pdf 的正确方法

本文介绍了如何使用 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 文档。

使用示例

Robovision AI

一个强大的视觉AI管理平台

查看详情

假设我们有一个名为 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 对象，并处理好图片加载完成后的回调函数，即可避免常见错误。该方法简化了图片添加过程，提高了代码的可维护性和可重用性。

以上就是使用 JsPDF 动态调整图片宽度并添加到 PDF 的正确方法的详细内容，更多请关注php中文网其它相关文章！