PDF Export Styles

Andreas S.

I want to style the exported pdf. in the console.log(doc) I see some styled named tabelHeader,...
Is it possible to change these settings?
I tried with

                    customize: function(doc){
                        styles: {
                            tableHeader:{
                                fillColor:"#F0F8FF"
                            }
                        }

But this did not work.

Andreas

gabrielandre

try to unminify the buttons.html5.min.js It has a clean JSON alike structure.

here is the field:

styles: {
tableHeader: {
bold: 0,
fontSize: 11,
color: "#595959",
alignment: "left"
},

allan

You don't need to unminify the file - the source code is freely available!

The Buttons PDF export uses pdfmake for the export - you would need to refer to their documentation for information on how to customise the styling using their APIs.

Allan

Andreas S.

Sorry I have some Problems with these. I think I set the vars not correct.
I do following:

                    customize: function(doc){
                        var table_head = {};

                        doc['styles'] = {
                            userTable: {
                                margin: [0, 15, 0, 15]
                            },
                            tableHeader: {
                                bold:!0,
                                fontSize:11,
                                color:'black',
                                fillColor:'#F0F8FF',
                                alignment:'center'
                            }
                        };
                        doc['content'] = {
                            style: 'userTable',
                            layout: 'lightHorizontalLines'
                        }

I think I set it correct, but I get following error:

Unrecognized document structure: {"style":"userTable","layout":"lightHorizontalLines","_margin":[0,15,0,15]}

I have no idea how can I set it and the table will print to the document.
Andreas

allan

I'm afraid you'd need to ask in the pdfmake support channels. I really can't help with their API as I'm not an expert in it.

Allan

Jewell4400

I needed to align PDF the table to the center I edited PDFMAKE.MIN.JS
var y=e.text.match(c),w=e.text.match(f);e.leadingCut=y?m.widthOfString(y[0],i):0,e.trailingCut=w?m.widthOfString(w[0],i):0,e.alignment=h(e,n,"alignment","center")

Changing only the center to get what i needed.
NOTE:
I had changed every COLUMN CLASS to give it the css style i wanted but they never exported.
hope this puts you on the right track.
AS gabrielandre got me there with his comment.

khawley

    $('#gridID').DataTable({
        dom: 'Bfti',
        pageLength: -1,
        buttons: [
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'TABLOID',
                customize: function (doc) {
                    var tblBody = doc.content[1].table.body;
                    doc.content[1].layout = {
                    hLineWidth: function(i, node) {
                        return (i === 0 || i === node.table.body.length) ? 2 : 1;},
                    vLineWidth: function(i, node) {
                        return (i === 0 || i === node.table.widths.length) ? 2 : 1;},
                    hLineColor: function(i, node) {
                        return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';},
                    vLineColor: function(i, node) {
                        return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';}
                    };
                    $('#gridID').find('tr').each(function (ix, row) {
                        var index = ix;
                        var rowElt = row;
                        $(row).find('td').each(function (ind, elt) {
                            tblBody[index][ind].border
                            if (tblBody[index][1].text == '' && tblBody[index][2].text == '') {
                                delete tblBody[index][ind].style;
                                tblBody[index][ind].fillColor = '#FFF9C4';
                            }
                            else
                            {
                                if (tblBody[index][2].text == '') {
                                    delete tblBody[index][ind].style;
                                    tblBody[index][ind].fillColor = '#FFFDE7';
                                }
                            }
                        });
                    });
                }
            },
            'excelHtml5'],

khawley

    $('#TableID').DataTable({
        dom: 'Bfti',
        pageLength: -1,
        buttons: [
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'TABLOID',
                customize: function (doc) {
                    var tblBody = doc.content[1].table.body;
                    // ***
                    //This section creates a grid border layout
                    // ***
                    doc.content[1].layout = {
                    hLineWidth: function(i, node) {
                        return (i === 0 || i === node.table.body.length) ? 2 : 1;},
                    vLineWidth: function(i, node) {
                        return (i === 0 || i === node.table.widths.length) ? 2 : 1;},
                    hLineColor: function(i, node) {
                        return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';},
                    vLineColor: function(i, node) {
                        return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';}
                    };
                    // ***
                    //This section loops thru each row in table looking for where either
                    //the second or third cell is empty.
                    //If both cells empty changes rows background color to '#FFF9C4' 
                    //if only the third cell is empty changes background color to '#FFFDE7'
                    // ***
                    $('#tableID').find('tr').each(function (ix, row) {
                        var index = ix;
                        var rowElt = row;
                        $(row).find('td').each(function (ind, elt) {
                            if (tblBody[index][1].text == '' && tblBody[index][2].text == '') {
                                delete tblBody[index][ind].style;
                                tblBody[index][ind].fillColor = '#FFF9C4';
                            }
                            else
                            {
                                if (tblBody[index][2].text == '') {
                                    delete tblBody[index][ind].style;
                                    tblBody[index][ind].fillColor = '#FFFDE7';
                                }
                            }
                        });
                    });
                }
            },
            'excelHtml5']