JSPDF：错误（不完整或损坏的PNG文件）

发布于 2025-01-22 14:15:29 字数 985 浏览 1 评论 0原文

我正在尝试添加徽标，然后尝试添加图片，但是打印它会显示此错误：

Incomplete or corrupt PNG file

如何解决此问题？

我在这里重新解决了问题： https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/app/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");
  };

原文

I am trying to add a logo and I tried adding a picture but printing it will show this error:

Incomplete or corrupt PNG file

How do I solve this?

I recreated the problem here: 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");
  };

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

硪扪都還晓 2025-01-29 14:15:29

图像在使用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');
};

The image is not fully loaded at the moment of its usage in doc.addImage. Wait for the image to be fully loaded and call addImage then.

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');
};

回复收藏 0 原文

~没有更多了~