pdfHtml5

pdfHtml5

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

The export with the pdfHtml5 Button works fine, but I have some problem to format the exported table.
I create a customize function like this:

{
                    extend: "pdfHtml5",
                    text: '<i class="fa fa-file-pdf-o text-red"></i>',
                    titleAttr: 'Export to PDF',
                    orientation: 'portrait',
                    pageSize: 'A4',
                    title:  pdfTitle + showClubName,
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 8, 7, 8],
                        orthogonal: 'export'
                    },
                    customize: function(doc){
                        doc['styles'] = {
                            tableHeader: {
                                bold: !0,
                                fontSize: 11,
                                color: 'black',
                                fillColor: '#F0F8FF',
                                alignment: 'center'
                            },
                            athleteTable: {
                                //alignment: 'center'
                            },
                            column1: {
                                alignment: 'center'
                            },
                            title: {
                                fontSize: 18,
                                bold: true,
                                margin: [0, 0, 0, 10],
                                alignment: 'center'
                            }
                        };
                        var cols = [];
                        cols[0] = {text: 'Athlete', alignment: 'left', margin:[15, 10, 10, 10] };
                        cols[1] = {text: moment().format('MMMM do YYYY, h:mm:ss'), alignment: 'right', margin:[10, 10, 15, 15] };
                        var objHeader = {};
                        objHeader['columns'] = cols;
                        doc['header'] = objHeader;

                        doc['content']['1'].layout = 'lightHorizontalLines';
                        doc['content']['1'].table.widths = ['2%', 140, 10, 15, 25, 20, 140, 20];
                        doc['content']['1'].style = 'athleteTable';

                        var objFooter = {};
                        objFooter['alignment'] = 'center';
                        doc["footer"] = function(currentPage, pageCount) {
                            var footer = [
                                {
                                    text: 'A .. Active, I .. Inactive',
                                    alignment: 'left',
                                    color: 'red',
                                    margin:[15, 15, 0, 15]
                                },{
                                    text: 'Page ' + currentPage + ' of ' + pageCount,
                                    alignment: 'center',
                                    color: 'blue',
                                    margin:[0, 15, 0, 15]
                                },{
                                    text: '',
                                    alignment: 'center',
                                    color: 'blue',
                                    margin:[0, 15, 15, 15]
                                }
                            ];
                            objFooter['columns'] = footer;
                            return objFooter;
                        };
                    }, className: 'btn btn-default'
                }

and I want the column 8 the alignment to center and the color in red. The pdfmake documentation say to set the column style with a defined style, that set to the output text. { text: 'This is a header', style: 'header' } but I did not know how can I set it to the specific column,

I tried with the orthogonal export like this

{ data: "active", width: '7%', render: function(data, type, row){
                        if(type === 'display'){
                            return (data == true)? '<i class="fa fa-check text-green" aria-hidden="true"></i>' : '';
                        }else if(type == 'export'){
                            return (data == true)? '<span class="text-green">A</span>' : 'I';
                        }else{
                            return (data == true)? 'A' : 'I';
                        }
                    }, className: 'text-center'
                }

But that did not work. Any idea how can I set the style to the column pdf output?

Andreas

This discussion has been closed.