Embedding a background image in pdfmake

Question

I'm using pdfmake http://bpampuch.github.io/pdfmake/index.html#/gettingstarted to implement html to pdf conversion. To create a PDF, I'm using some hard-coded text and some text pulled in with AngularJS from a .json file. All works well for the exception of the background image.

Has anyone done this before? Used a background image with pdfmake? I would like to get some advice on how to force it to grab it and actually put it in the background. Thanks.

Answer 1

Turns out that in order to set an image as the background, one needs to decide on the .pdf output size, size the bkg image appropriately and then indicate all dimensions in the function as follows (I'm using AngularJS with this):

$scope.pdfMaker = function() {
var docDefinition = {
  pageSize: 'LETTER',
  background: [
   {
       image: 'data:image/jpeg;base64,/9j/4QAY...',
       width: 792
   }
 ],
 //other parameters go here
}

Indicating pageSize and width of the image was crucial to having the image appear in the background.

Let me know if there are errors in this method or if anyone had success doing it in a simpler way.

Answer 2

This would overlap your text with you Image (will act as background image). This solution can work for multiple images as well.

Example code:

var dd = {
    content: [
        {
            image: 'sampleImage.jpg',
            width: 200
        },
        {
            text: 'Text over image',
            absolutePosition: {x: 100, y: 50}
        }       
    ]
}