PDF Export Styles

PDF Export Styles

Andreas S.Andreas S. Posts: 190Questions: 68Answers: 4

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

This question has an accepted answers - jump to answer

Answers

  • gabrielandregabrielandre Posts: 4Questions: 1Answers: 1
    edited February 2017

    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"
    },

  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin
    Answer ✓

    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.Andreas S. Posts: 190Questions: 68Answers: 4

    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

  • allanallan Posts: 54,914Questions: 1Answers: 8,608 Site admin

    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

  • Jewell4400Jewell4400 Posts: 5Questions: 1Answers: 0

    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.

  • khawleykhawley Posts: 2Questions: 0Answers: 0
        $('#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'],
    
  • khawleykhawley Posts: 2Questions: 0Answers: 0
        $('#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']
    
This discussion has been closed.