Building table dynamically with PDFMake

Question

I'm working with pdfmake to generate pdf with javascript. I'm trying to build a table dynamically but not works ,this my attempt

$.ajax({
    type: "POST",
    url: myURL,
    success:function(data){
        /* data has a format like :
         *[{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"15:42","valor":"5000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-10-18","hora":"14:21","valor":"7000"},{"peaje":"Peaje 1","ruta":"Ruta 1","fechaCruce":"2014-09-19","hora":"11:58","valor":"17000"}]
         */
        var peajes = JSON.parse( data );
        var body = [];
        var titulos = new Array( 'PEAJE', 'RUTA', 'FECHA CRUCE', 'HORA', 'VALOR' );
        body.push( titulos );
        for (key in peajes)
        {
            if (peajes.hasOwnProperty(key))
            {
                var peaje = peajes[key];
                var fila = new Array();
                fila.push( peaje.peaje.toString() );
                fila.push( peaje.ruta.toString()  );
                fila.push( peaje.fechaCruce.toString() );
                fila.push( peaje.hora.toString()  );
                fila.push( peaje.valor.toString() );
                body.push(fila);
            }
        }
        console.log( body );
        var docDefinition = {
            content: [
            {
                table: {
                   headerRows: 1,
                   widths: [ '*', 'auto', 100, '*' ],
                   body: body
                }
            }]
        };//end docDefinition
        pdfMake.createPdf(docDefinition).open();
    }//end success
  });

This is the example of the library http://pdfmake.org/#/gettingstarted

I don't know what am I doing wrong?

Answer 1

You should make array of column names & values:

var column = [];
column.push({ text: 'A', style: 'tableHeader'});
column.push({ text: 'B', style: 'tableHeader'});

var value = [];
value.push({ text: 'Asda', style: 'tableHeader'});
value.push({ text: 'Bsa', style: 'tableHeader'});

When you make a table, you should do like this.

table: {
  headerRows: 1,
    body: [
      column, value
    ]
}

Answer 2

For multiple rows, here is an example

    var externalDataRetrievedFromServer = [
    { name: 'Bartek', age: 34 },
    { name: 'John', age: 27 },
    { name: 'Elizabeth', age: 30 },
];

function buildTableBody(data, columns) {
    var body = [];

    body.push(columns);

    data.forEach(function(row) {
        var dataRow = [];

        columns.forEach(function(column) {
            dataRow.push(row[column].toString());
        })

        body.push(dataRow);
    });

    return body;
}

function table(data, columns) {
    return {
        table: {
            headerRows: 1,
            body: buildTableBody(data, columns)
        }
    };
}

var dd = {
    content: [
        { text: 'Dynamic parts', style: 'header' },
        table(externalDataRetrievedFromServer, ['name', 'age'])
    ]
}

Answer 3

For headers and rows are dynamic , we can define headers in an array and also rows and then join them into one following this example ( copy and paste into http://pdfmake.org/playground.html to see it in action ) :

// playground requires you to assign document definition to a variable called dd

var headers = {
    fila_0:{
        col_1:{ text: 'Faltas', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] },
        col_2:{ text: 'Fecha', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] },
        col_3:{ text: 'Descripción', style: 'tableHeader',rowSpan: 2, alignment: 'center',margin: [0, 8, 0, 0] },
        col_4:{ text: 'Cita con acudientes', style: 'tableHeader',colSpan: 2, alignment: 'center' }
    },
    fila_1:{
        col_1:{ text: 'Header 1', style: 'tableHeader', alignment: 'center' },
        col_2:{ text: 'Header 2', style: 'tableHeader', alignment: 'center' }, 
        col_3:{ text: 'Header 3', style: 'tableHeader', alignment: 'center' },
        col_4:{ text: 'Citación', style: 'tableHeader', alignment: 'center' },
        col_5:{ text: 'Cumplimiento', style: 'tableHeader', alignment: 'center'}
    }
}
var rows = {
    a: {
        peaje: '1',
        ruta: '2',
        fechaCruce: '3',
        hora: '4',
        valor: '5'
    },
    b: {
        peaje: '1',
        ruta: '2',
        fechaCruce: '3',
        hora: '4',
        valor: '5'
    }
}

var body = [];
for (var key in headers){
    if (headers.hasOwnProperty(key)){
        var header = headers[key];
        var row = new Array();
        row.push( header.col_1 );
        row.push( header.col_2 );
        row.push( header.col_3 );
        row.push( header.col_4 );
        row.push( header.col_5 );
        body.push(row);
    }
}
for (var key in rows) 
{
    if (rows.hasOwnProperty(key))
    {
        var data = rows[key];
        var row = new Array();
        row.push( data.peaje.toString() );
        row.push( data.ruta.toString()  );
        row.push( data.fechaCruce.toString() );
        row.push( data.hora.toString()  );
        row.push( data.valor.toString() );
        body.push(row);
    }
}

var dd = {
        pageMargins: [40,155,40,55],
        pageOrientation: 'landscape',
        header: function() {
            return {
                margin: 40,
                columns: [
                  {
                    },
                    { text:['Resumen disciplinario'], 
                            alignment: 'left',bold:true,margin:[-405,80,0,0],fontSize: 24}
                ]
            }
        },
        footer: function(currentPage, pageCount) {
            return { text:'Pagina '+ currentPage.toString() + ' de ' + pageCount, alignment: 'center',margin:[0,30,0,0] };
        },
        content: [
            //{ text: 'Tables', style: 'header' },
            '\nEl estudiante AGRESOTH NEGRETE JORYETH TATIANA - 901 - TARDE tiene 1 actas, con 1 faltas acomuladas y a manera de resumen descritas a continuación:\n\n',
            //{ text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'sta' },
            //'The following table has nothing more than a body array',
            {
                style: 'tableExample',
                table: {
                    widths: [ '*', '*', '*', '*', '*' ],
                    headerRows: 2,
                    // keepWithHeaderRows: 1,
                    body: body
                }
            }],
        styles: {
            header: {
                fontSize: 28,
                bold: true
            },
            subheader: {
                fontSize: 15,
                bold: true
            },
            quote: {
                italics: true
            },
            small: {
                fontSize: 8
            },
            sta: {
                fontSize: 11,
                bold: false,
                alignment: 'justify'
            }
        }
}