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

Inplete or corrupt PNG file

How do I solve this?

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

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

Inplete 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");
  };

• javascript
• reactjs
• jspdf
• jspdf-autotable

Share Improve this question Follow asked Apr 20, 2022 at 10:11 JS3JS3 1,87944 gold badges3434 silver badges8383 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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