I have a datatable and i have print button and pdf button. I can change font size when print page but i can't change font size while exporting pdf file.
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape'
},
{
extend: 'print',
text: 'Print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '15pt' )
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', '8pt' );
},
header: false,
title: '',
orientation: 'landscape'
},
can you help me?
If you look at the src of html5.js, it creates a default object literal doc
holding default settings :
var doc = {
pageSize: config.pageSize,
pageOrientation: config.orientation,
content: [
{
table: {
headerRows: 1,
body: rows
},
layout: 'noBorders'
}
],
styles: {
tableHeader: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154',
alignment: 'center'
},
tableBodyEven: {},
tableBodyOdd: {
fillColor: '#f3f3f3'
},
tableFooter: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154'
},
title: {
alignment: 'center',
fontSize: 15
},
message: {}
},
defaultStyle: {
fontSize: 10
}
};
You can use the customize
callback to change those default settings :
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape',
customize: function(doc) {
doc.defaultStyle.fontSize = 16; //<-- set fontsize to 16 instead of 10
}
},
Changing the header font size:
doc.styles.tableHeader.fontSize = 30
https://jsfiddle.net/2nwqa2jk/12/
Change alignment, set center to all headers, all columns all footers :
doc.defaultStyle.alignment = 'center'
https://jsfiddle.net/2nwqa2jk/13/
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