JsPDF：错误（不完整或损坏的 png 文件）

Question

我正在尝试添加徽标并尝试添加图片，但打印时会显示此错误：

Incomplete or corrupt PNG file

我该如何解决？

我在这里重现了这个问题：https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

  const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();

    var img = new Image();
    img.src = "assets/logo-social.png";
    doc.addImage(img, "png", 10, 78, 12, 15);

    doc.text("Title here", 20, 10);
    doc.text("Sample", 20, 15);

    const columns = ["Data"];
    const rows = [];
    data.map((item) =>
      rows.push([
        item.cartItems.map(
          (item) => `${item.name}: ${item.color} = ${item.quantity}`
        )
      ])
    );
    doc.autoTable(columns, rows);
    doc.save("order.pdf");
  };

Answer 1

图像在 doc.addImage 中使用时尚未完全加载。等待图像完全加载，然后调用addImage。

const img = new Image();
img.src = 'image-url';
img.onload = () => {
  // await for the image to be fully loaded
  doc.addImage(img,'png',...);
  doc.text("Sample", 20, 15);
  //...
  doc.save('order.pdf');
};

JsPDF：错误（不完整或损坏的 png 文件）

JsPDF: Error (Incomplete or corrupt png file)

javascript

jspdf

reactjs

jspdf-autotable