Cannot display local image in pdf document using pdfmake

Question

I'm trying to add an logo to a pdf document that is being generated by pdfMake. This is my code:

import {Injectable} from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  getDocumentDefinition(id: number, companyName, productName) {
    // productEvalDate: Date
    // getDocumentDefinition(id: number, productName: string, companyName) {

    return {
      content: [{
        image: '.assets/images/GPBC-logo-2019.jpg',
        width: 150,
        text: 'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
          'under XXX Certification.\n \n' +
          'Name of Product: ' + productName +
          '\n Name of Producer/Owner: ' + companyName +
          '\n Product ID#: ' + id +
          '\n \n \n Signed by: XXX '
        // '\n \n \n This certificate is valid until: ' + productEvalDate
        ,
        fontSize: 20
      },
        {


        }]
    };
  }
}

The result that I'm getting is that everything displays correctly; the text and the dynamic data. But there is no image display, and no error either.

Since doing more research, I've changed the code as follows:

import {Injectable} from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

@Injectable({
  providedIn: 'root'
})
export class PdfService {

  constructor() { }

  getDocumentDefinition(id: number, companyName, productName) {
    // productEvalDate: Date
    // getDocumentDefinition(id: number, productName: string, companyName) {

    return {
      content: [
'The product, listed below, produced for the company listed below, is PLANT-BASED certified ' +
          'under XXX Certification.\n \n' +
          'Name of Product: ' + productName +
          '\n Name of Producer/Owner: ' + companyName +
          '\n Product ID#: ' + id +
          '\n \n \n Signed by: XXX '
        // '\n \n \n This certificate is valid until: ' + productEvalDate
        {
         image: './assets/images/GPBC-logo-2019.jpg',
        width: 150
,
        fontSize: 20
      },
        {


        }]
    };
  }
}

I'm getting an error message as follows:Invalid image: File not found in virtual file system Images dictionary should contain dataURL entries (or local file paths in node.js). I believe I need to convert the image to base64, but I don't really see clear instructions on how to do it. any help would be appreciated

score 4 · Answer 1 · edited Dec 26 '22 at 12:46

this will help you to get image from the local asset file. It is important to add async and await for converting.

getBase64ImageFromURL(url: string) {
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"
      )
    }

score 0 · Answer 2 · answered Nov 02 '20 at 03:06

0

I believe images need to be converted to base64 before can be used, source

to convert image to base64

answered Nov 02 '20 at 03:06

aleng

366
2
13

score 0 · Answer 3 · answered Jan 23 '22 at 16:54

You do not have to convert to base64. You can include local JPGs and PNGs from your filesystem if you put them in the ./images folder from the pdfmake root. Then they will be referenced as "./images/filename.jpg" (or .png as the case may be). This is from the PDF Make dev playground. If you are not using the dev playground then the paths will be different, but you can at least see how it can work with local JPGs and PNGs using the dev playground as a template.

Cannot display local image in pdf document using pdfmake

3 Answers3