Embedding a background image in pdfmake

javascript angularjs pdfmake

Varvara Jones · Apr 8, 2015 · Viewed 12.3k times · Source

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

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.

Embedding a background image in pdfmake

Answer

Related questions