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