Like header style in exported pdf in datatable

Question

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 perhaps 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 will display the html tags, not the style.

Answer 1

You cannot use HTML in the header. There seems to be no way around this limitation. This BTW is not the trivial task you expect from PDFmake. Think about it - any type of HTML element should be displayed in the default style used when creating a PDF file on canvas. However, if your problem is with line breaks, \n will work as <br> , i.e.

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

The only real parameters you have are a very limited set of pseudo-CSS links that 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 the example -> https://jsfiddle.net/ztjLtbwm/

The reason I call pseudo-CSS is because work objects are either the same as CSS equivalents or really close to them. See the full list of supported styles here → https://github.com/bpampuch/pdfmake /blob/master/src/styleContextStack.js#L84 You need to try an error on each object, for example fillColor does not seem to honor title ; background does, but not backgroundColor .