Add Fixed Header and footer to exported pdf file

patelleena57

Hello

I need to add logo in header of my exported pdf and in footer i need to add page numbers and some parameters.

I googled so many things. But had no luck.
Can anyone guide me how to add header and footer in exported pdf?

Here is my code

$('#example_table').DataTable( {
"scrollX": true,
"scrollY": 380,
scrollCollapse: true,
"paging": true,
"ordering": true,
lengthMenu: [
[ 10, 25, 50, 2147483647 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
"pageLength": 2147483647,
scroller: true,
"serverSide": true,
"columnDefs": [ {
"targets": 0,
"orderable": false,
"searchable": false
} ],
"destroy":true,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": "<a class='btn searchBtn' id='searchBtn'><i class='fa fa-search'></i></a> "
},
dom: 'lBfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: cols_export,
modifier: {
filter: 'applied', order: 'current'
}
}
},
{
extend: 'pdf',
customize: function (pdf) {
return "My header here....\n\n"+ pdf +"\n\nMy Footer here.....";
},
exportOptions: {
columns: cols_export
}
}
,'print'
],
"ajax":{
url : "include/display_list.php?keyword=" + 'civil_configuration_bim_table'+url_append,
type: "post",
error: function(data){
$(".employee-grid-error").html("");
$("#admin_list").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
},
},
deferRender: true
} );
});

Thanks in advance

F12Magic

Hi patelleena57,
it's really not so easy to customize the pdf output. Found that out recently when I needed to adjust some things myself. Below is the code I came up with. You need to focus on the customize section. Maybe you can use some parts and discover how to get your job done. Success.

buttons: [
    {
        text: 'PDF Html5 (Land)',
        extend: 'pdfHtml5',
    message: '',
    orientation: 'landscape',
    exportOptions: {
         columns: ':visible'
    },
    customize: function (doc) {
        doc.pageMargins = [10,10,10,10];
        doc.defaultStyle.fontSize = 7;
        doc.styles.tableHeader.fontSize = 7;
        doc.styles.title.fontSize = 9;
        // Remove spaces around page title
        doc.content[0].text = doc.content[0].text.trim();
        // Create a footer
        doc['footer']=(function(page, pages) {
            return {
                columns: [
                    'This is your left footer column',
                    {
                        // This is the right column
                        alignment: 'right',
                        text: ['page ', { text: page.toString() },  ' of ', { text: pages.toString() }]
                    }
                ],
                margin: [10, 0]
            }
        });
        // Styling the table: create style object
        var objLayout = {};
        // Horizontal line thickness
        objLayout['hLineWidth'] = function(i) { return .5; };
        // Vertikal line thickness
        objLayout['vLineWidth'] = function(i) { return .5; };
        // Horizontal line color
        objLayout['hLineColor'] = function(i) { return '#aaa'; };
        // Vertical line color
        objLayout['vLineColor'] = function(i) { return '#aaa'; };
        // Left padding of the cell
        objLayout['paddingLeft'] = function(i) { return 4; };
        // Right padding of the cell
        objLayout['paddingRight'] = function(i) { return 4; };
        // Inject the object in the document
        doc.content[1].layout = objLayout;
    }
    }
]

patelleena57

Thanks a lot. It worked!

patelleena57

@F12Magic Can you help me How can i put header and footer in excel also?

F12Magic

Never done it before, but somewhere in the past I had made one with autofilters. So I adjusted that one to make a header and footer. You'll have to know a bit of working with nodes in javascript.
I made an example on Codepen
In the javascript window you'll find an explanation of default things you can put in the header and/or footer.
And for the ones that would like to see the code immediatly ...

"buttons": [
    {
        extend: 'excelHtml5',
        text: 'Excel',
        customize: function( xlsx ) {
            var sheet = xlsx.xl.worksheets['sheet1.xml'];
            // Get reference to the worksheet and parse it to xml nodes
            // Has to be done this way to avoid creation of namespace atributes.
            var afSerializer = new XMLSerializer();
            var xmlString = afSerializer.serializeToString(sheet);
            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(xmlString,'text/xml');
            //Create header and add it to the worksheet
            var headerFooter = xmlDoc.createElementNS('http://schemas.openxmlformats.org/spreadsheetml/2006/main','headerFooter');
            sheet.getElementsByTagName('worksheet')[0].appendChild(headerFooter);
            var nodeHeaderFooter = sheet.getElementsByTagName("headerFooter");
            var oddHeader = xmlDoc.createElementNS('http://schemas.openxmlformats.org/spreadsheetml/2006/main','oddHeader');
            nodeHeaderFooter[0].appendChild(oddHeader);
            var nodeOddHeader = sheet.getElementsByTagName("oddHeader");
            //The header / Footer column definitions
            // If unwanted, you can skip a column
            //&L = Left column
            //&F = Filename
            //&A = sheetname
            //&C = Center column
            //&D = Date
            //&T = Time
            //&R = Right Column
            //&P = Pagenumber
            //&N = Total number of pages
            var txtHeader = "&L"+"&F - &A"+"&R"+"&D - &T";
            var nodeHeader = xmlDoc.createTextNode(txtHeader);
            nodeOddHeader[0].appendChild(nodeHeader);
            //Creation of the footer
            var oddFooter = xmlDoc.createElementNS('http://schemas.openxmlformats.org/spreadsheetml/2006/main','oddFooter');
            nodeHeaderFooter[0].appendChild(oddFooter);
            var nodeOddFooter = sheet.getElementsByTagName("oddFooter");
            var txtFooter = "&R"+"Page &P of &N";
            var nodeFooter = xmlDoc.createTextNode(txtFooter);
            nodeOddFooter[0].appendChild(nodeFooter);
            //Add header and footer to the worksheet
            sheet.getElementsByTagName('worksheet')[0].appendChild(headerFooter);
        }
    }
]