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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With