Estoy tratando de agregar un logotipo e intenté agregar una imagen, pero al imprimirla se mostrará este error:
Incomplete or corrupt PNG file¿Cómo puedo solucionar esto?
Recreé el problema aquí: 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"); };La imagen no está completamente cargada en el momento de su uso en doc.addImage . Espere a que la imagen se cargue por completo y luego llame a 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'); };