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, Apr 11 '17 at 18:17
What result do you get if you don't base64 encode and just pass the file path / name ? — floor, Apr 11 '17 at 18:17
@MehulMohan, Yeah, that was a copy/paste error. Thanks, I fixed in in the post and verified it was correct in my code. — wonder95, Apr 11 '17 at 18:19
That image content does not look like base64. Did you actually convert it to base64? — Rani Radcliff, Apr 11 '17 at 18:41
I had the same error, and the solution for me was to use png image instead of svg. — AHMAD EZZAT, Dec 01 '21 at 10:34

score 4 · Accepted Answer · answered Apr 11 '17 at 18:51

4

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.

answered Apr 11 '17 at 18:51

wonder95

3,825
8
45
74

score 4 · Answer 2 · edited Jun 17 '21 at 10:48

you can try like this. and it will work fine. Don't forget to vote up

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. — XouDo, Jun 17 '21 at 08:06

score 0 · Answer 3 · answered Feb 09 '23 at 11:49

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]);

Invalid image error using dataUrl in pdfmake

3 Answers3