Embed a Image in a PDF

watherton

Hi,

I'm using the pdfHtml buttons, and trying to embed an image into the output, using the following:

customize: function (doc)
{
doc.content.splice( 1, 0,
{
margin: [ 0, 0, 0, 12],
alignment: 'center',
image: '../Content/img/home_logo.jpg'
});
}

this is throwing up a Cannot read property 'embed' of undefined, meaning it cant find the image. this image is there, and the path is correct.

allan

You'd need to check the PDFMake documentation, but you might need to convert the image to be a base 64 string for it to work.

Allan

watherton

hi Allan,

all looks good from there:

var docDefinition = {
  content: [
    {
      // you'll most often use dataURI images on the browser side
      // if no width/height/fit is provided, the original size will be used
      image: 'data:image/jpeg;base64,...encodedContent...'
    },
    {
      // if you specify width, image will scale proportionally
      image: 'data:image/jpeg;base64,...encodedContent...',
      width: 150
    },
    {
      // if you specify both width and height - image will be stretched
      image: 'data:image/jpeg;base64,...encodedContent...',
      width: 150,
      height: 150
    },
    {
      // you can also fit the image inside a rectangle
      image: 'data:image/jpeg;base64,...encodedContent...',
      fit: [100, 100]
    },
    {
      // if you reuse the same image in multiple nodes,
      // you should put it to to images dictionary and reference it by name
      image: 'mySuperImage'
    },
    {
      // under NodeJS (or in case you use virtual file system provided by pdfmake)
      // you can also pass file names here
      image: 'myImageDictionary/image1.jpg'
    }
  ],

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

allan

Are you using NodeJS or the virtual file system provided by pdfmake as the comment about using file names directly states?

Allan

watherton

Converted the image to Base64 and it worked a treat. Thanks.