11

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.

Mackles24
  • 111
  • 1
  • 8
Varvara Jones
  • 761
  • 2
  • 8
  • 25

3 Answers3

17

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.

Varvara Jones
  • 761
  • 2
  • 8
  • 25
  • can I pass direct url instead of base64?, my base64 image does not appears in PDF, what could be an issue? – 151291 Feb 27 '19 at 08:55
  • I think I've tried that before and it didn't work. Unfortunately, I didn't write this code, so I am unable to tell you what would work and what wouldn't. Your best bet would be to try and see. If your original image is too large dimension wise, that would be a problem. Try with something small first. – Varvara Jones Mar 04 '19 at 23:57
7

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}
        }       
    ]
}
iDevAmit
  • 1,550
  • 2
  • 21
  • 33
2

You can also use the background property

 background: {
          image: AegleBase64,
          width: 200,
          opacity: 0.05,
          absolutePosition: { x: 150, y: 250 },
        },

which allows you to spcify the width of the image and use the absolutePosition to give it a position that suits your use case

Adewale Olaoye
  • 109
  • 9