CODEWITHSUNDEEP
jquerypdfdatatables
ImpendingDoom
ImpendingDoom

Reputation: 437

How to style title in exported pdf in datatable

The code in question:

$("#my-table").DataTable( {
            data: dataSet,
            columns: columns,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'Awesome Export',
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Awesome Export',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                }
            ]
        });

How can I style the title using maybe html:

var title = '<h1>My title</h1><br /> <p>by John</p>';

// then in the code
...
buttons: [
    {
        extend: 'excelHtml5',
        title: title
    }
]
...

If I try to do this it displays the html tags instead of styling it.

Upvotes: 7

Views: 18402

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

You cannot use HTML in the title. There seems not to be any way to get around this limitation. It is BTW not a trivial task you expect from PDFmake. Think about it - any type of HTML-element should be mapped into a default style used when the PDF is drawed on a canvas. However, if your concern is linebreaks \n will work as a <br>, i.e.

var title = 'My title' + '\n' + 'by John';

The only real options you have is a very limited set of "pseudo"-CSS references you can add to the doc.styles.title literal in the customize callback. Example

buttons: [{
  extend: 'pdfHtml5',
  title: 'My title' + '\n' + 'a new line',
  customize: function(doc) {
    doc.styles.title = {
      color: 'red',
      fontSize: '40',
      background: 'blue',
      alignment: 'center'
    }   
  }  
}]

See this in a example -> https://jsfiddle.net/ztjLtbwm/

The reason I call it "pseudo"-CSS is that working entities either is the same as CSS equivalences or really close to. See full list of supported styles here -> https://github.com/bpampuch/pdfmake/blob/master/src/styleContextStack.js#L84 You will have to try-error on each entity, for example fillColor does not seem to be respected by title; background does - but not backgroundColor.

Upvotes: 13

Related Questions