pdfmake

How to set the background color and padding of text in pdfmake


I have a string that I want to use as the title for the PDF document. I attempted to achieve this with the following code, but I encountered an issue with the background color. Instead of applying the background color to the entire row, it only appears directly beneath the text. I would greatly appreciate any assistance in resolving this problem.

var dd = {
   
    content: [
            {
        text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
        style: 'header'
      },
],
    styles: {
        header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10],
            background:'blue',
            color: 'white',
            alignment:'center'
        }
    },
    defaultStyle: {
        // alignment: 'justify'
    }
    
}

Solution

  • I couldn't find a straightforward way to customize the background color and padding of text. To address this, I explored an alternative approach by designing a table where only the header utilizes a single column without borders. This solution proved effective for my specific use case.

        var dd = {
                content: [
                
                 
                {
                    style: 'header',
                    table: {
                        widths:'*',
                        body: [
                            [{
                                    border: [false, false, false, false],
                                    fillColor: '#5bc0de',
                                    text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
                                }]
                        ]
                    }
                },
                
            
            ]
    }