CODEWITHSUNDEEP
javascriptarraysjspdf-autotable
Eduardo Moreno
Eduardo Moreno

Reputation: 111

JsPDF-Autotable blank rows using array with objects

Im trying to fill a Table with an array that contains persons objects, the clg displays the same structure as the example from the plugin github. My array with objects: enter image description here

JsPDF- Autotable Array with Objects: enter image description here

Im setting as row the array var but my table is displaying like this: enter image description here

The table is drawing 3 rows, one for each object, but no data displayed.

This is my pdf generator code

  let genPdf = () => {
var doc = new jsPDF('l', 'pt');
doc.autoTable(cols,rowArray, {
  // Styling
  theme: 'striped', // 'striped', 'grid' or 'plain'
  styles: {overflow: 'linebreak',columnWidth: 'wrap',lineWidth: 1,cellPadding: 2, fontSize: 10 },   
  columnStyles: { text: { columnWidth: 'auto' } },
  headerStyles: {},
  bodyStyles: {},
  alternateRowStyles: {},

  // Properties
  startY: 30, // false (indicates margin top value) or a number
  margin: 40, // a number, array or object
  pageBreak: 'auto', // 'auto', 'avoid' or 'always'
  tableWidth: 'auto', // 'auto', 'wrap' or a number, 
  showHeader: 'everyPage', // 'everyPage', 'firstPage', 'never',
  tableLineColor: 200, // number, array (see color section below)
  tableLineWidth: 0,

  // Hooks

});

doc.setPage(1 + doc.internal.getCurrentPageInfo().pageNumber - doc.autoTable.previous.pageCount);
doc.save('reporte.pdf');}

Upvotes: 3

Views: 4973

Answers (2)

Alejandro Planes
Alejandro Planes

Reputation: 41

I did the same thing using Object.values it took me a while but it works

 exportarPDF(json:any[],  nombreArchivo: string){
const pdf = new jsPDF();

let values: any;
let data = json;  
let privados = ["imagen","autorizado","id","rol","direccion","email","telefono","clave", "avatar"];
let header = Object.keys(data[0]).filter(key => !privados.includes(key));
// data.map( (elemento,i) => console.log(`Indice:${i} ${Object.values(elemento)}`));
values = data.map( (elemento) => Object.values(elemento));

console.log(values);

autoTable(pdf,
{
  head: [header],
  body: values,
})

console.log("Impresion PDF");
pdf.save(nombreArchivo + '.pdf'); 
}
}

Upvotes: 2

Eduardo Moreno
Eduardo Moreno

Reputation: 111

i have to create an array to save the objec values and push the object values of the object like this

arrayWithObjects.push(Object.values(p));

p it's the new object, inside an addPerson function i wrote the code above and worked enter image description here

enter image description here

I hope it helps someone

Upvotes: 2

Related Questions