Dynamic table building with PDFMake

Question

I am working with pdfmake to create pdf using javascript. I am trying to build a table dynamically, but not working, this is 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 an example library http://pdfmake.org/#/gettingstarted

I don’t know what am I doing wrong?

Answer 1

You must create an array of column names and 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 create a table, you should do like this:

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

Answer 2

For a few lines 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 strings are dynamic, we can define the headers in the array as well as the strings, and then attach them to one in the following example (copy and paste in 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 ya 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' } } } 

Answer 4

API for data: http://api.affixus.com/pub/home/live/5c9f4d3003d5dba159be3efd all code for generating PDF using JSON response from GET API request

place an order on gitHub: https://github.com/shvmbisht/pdf-generation-nodeJs