Invalid image error using dataUrl in pdfmake

Question

I'm using pdfmake to generate a PDF doc in an angular app, and just trying to add an image to the output using a dataURL (following the pdfmake docs.

 var docDefinition = { content: [ { table: { widths: ['*'], body: [ [{text: 'Table text goes here', style: 'tableCellPadded'}] ] }, }, { image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACHCAYAAADqQ...AABJRU5ErkJggg==", width: 152 } '...various other text lines go here...' ], styles: { header: { bold: true, fontSize: 14 }, tableCellPadded: { margin: [0, 15, 0, 15], bold: true, fontSize: 14 }, note: { fontSize: 16, bold: true, italics: true } } };

However, when I attempt to print out the doc, I get this error in my console:

invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

As best as I can tell, I have the item entered correctly in the doc definition object, and my dataURL is valid (I've tested it in my browser). Is there something else I'm missing?

Thanks.

I mean you're missing a quote here: image: data:image/png;b.. it should be rather image: "data:image/png;...." — mehulmpt
– mehulmpt, Commented Apr 11, 2017 at 18:17
What result do you get if you don't base64 encode and just pass the file path / name ? — floor
– floor, Commented Apr 11, 2017 at 18:17

Eric Aya · Accepted Answer · 2024-03-07 06:53:53Z

You can try like this and it will work fine.

getBase64ImageFromURL(url) { return new Promise((resolve, reject) => { var img = new Image(); img.setAttribute("crossOrigin", "anonymous"); img.onload = () => { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); resolve(dataURL); }; img.onerror = error => { reject(error); }; img.src = url; }); }

async createPdf() { var docDefinition = { content: [ { image: await this.getBase64ImageFromURL("../../assets/ribbonLogo1.png") },

Welcome to stackoverflow. It's always better to explain briefly how the code is solving the problem.

wonder95 · Accepted Answer · 2017-04-11 18:51:09Z

OK, I'm chalking this one up to an ID-10-T error. My line with the base64 encoded URL is working fine. I found another line farther down in my doc definition object where I wasn't referring to the image properly, and that one was throwing the error.

MPN7 · Accepted Answer · 2024-03-07 12:12:48Z

1

pdfMake will only work for .jpeg / .jpg / .png files, make sure your image file is one of this file extensions.

Very important.

edited Mar 7, 2024 at 12:12

MPN7

1,3781 gold badge14 silver badges18 bronze badges

answered Mar 7, 2024 at 6:41

Priyabrata Maji

411 silver badge5 bronze badges

Comments

nerdess · Accepted Answer · 2023-02-09 11:49:10Z

I noticed this bug within a React environment.

The problem seems to be a mutation of the arguments object that get passed to createPdf.

I fixed it by ensuring what is passed into createPdf is "clean" and has no references to the data that is coming in anymore. This is my code:

 useEffect(() => { const iframe = iframeRef.current; pdfMake .createPdf({ content: JSON.parse(JSON.stringify(content)) }) .getBase64((encodedString) => { iframeRef.current.src = `data:application/pdf;base64,${encodedString}`; }) return () => iframe.src = 'about:blank'; }, [content]);

enisbeygorus · Accepted Answer · 2024-03-27 17:24:51Z

I solved this with adding image path in docDefinition object. You can check the Image documentation https://pdfmake.github.io/docs/0.1/document-definition-object/images/

Be sure to add:

images: { mySuperImage: 'data:image/jpeg;base64,...content...', };

like this.

Collectives™ on Stack Overflow

Invalid image error using dataUrl in pdfmake

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Related