Go through a for to fill a table in pdfMake

Question

I am building a pdf of a sale. I am performing dummy data testing to validate the document layout. But the layout is "popping" as you go through the for.

This is my code:

createPdf() {
var column = [];
column.push({ text: 'Qtd.'});
column.push({ text: 'Produto/Serviço'});
column.push({ text: 'Valor unitário'});
column.push({ text: 'SubTotal'});

var value = [];
for(let i = 0; i < this.teste.length; i++){
  value.push({text: this.teste[i].qtd, style: 'tableHeader'});
  value.push({text: this.teste[i].nome, style: 'tableHeader'});
  value.push({text: this.teste[i].preco, style: 'tableHeader'});
  value.push({text: this.teste[i].total, style: 'tableHeader'});
}
/*value.push({ text: '01', style: 'tableHeader' });
value.push({ text: 'Calça masculina', style: 'tableHeader' });
value.push({ text: '150,00', style: 'tableHeader' });
value.push({ text: '150,00', alignment: 'right' });*/

var docDefinition = {
  content: [

    { text: '01/01/2019', fontSize: 12, alignment: 'left' },
    { text: 'Venda', fontSize: 12, alignment: 'right', margin: [0, -12, 0, 0] },
    { text: '_______________________________________________________________________________________________' },
    { text: 'Nome do cliente', fontSize: 12, alignment: 'left', margin: [0, 12, 0, 0] },
    { text: '092.786.449-51', fontSize: 12, alignment: 'right', margin: [0, -14, 0, 0] },
    { text: '_______________________________________________________________________________________________' },

    {
      margin: [0, 15, 0, 0],
      table: {
        widths: ['10%', '*', '20%', '20%'],
        headerRows: 1,
        body: [
          [column], [value]
        ]
      }
    },

    { text: 'Valor Total: 150,00', alignment: 'right', margin: [0, 10, 5, 0] },

    { text: '_______________________________________________________________________________________________' },
    { text: 'Condição de pagamento' },
    { text: 'Forma de pagamento: Cartão 2x', alignment: 'left', margin: [0, 15, 0, 0] },
    { text: '_______________________________________________________________________________________________' },
    { text: 'Observações: Testando o impresso', alignment: 'left', margin: [0, 10, 0, 0]},
  ], 

  footer: {
    columns: [
      { text: 'Empresa Modelo - 092.786.449-51', alignment: 'center' },
    ]
  },
};

this.pdfObj = pdfMake.createPdf(docDefinition);
}

The result I’m getting is this image, I need the columns and rows to be filled dynamically as the is traversed. My table header will be static, but the information will always be dynamic, as it will scroll through an array of sale items:

What I hope to get is:

Answer 1

There is a certain time the post, but I will put a possible solution.

The .push creates an array at each element position found.

If you look in the console, it will have an array with each result found. Example:

column.push({ text: 'Qtd.'});
column.push({ text: 'Produto/Serviço'});

Had stayed like this:

['Qtd'],
['Produto/Serviço'],

Making pdfMake understand that each of this array is a new line.

My solution here in the tool was to allocate each field in a variable (it is not a 100% solution, but it met me). Example:

prop1= [];
prop2= [];
 for (const i of this.teste) {
          this.prop1.push(i.propr1);
}

And inside the body go referenced the columns you want

[header1, header2]
[prop1, prop2]

Answer 2

Your code has a problem in this section.

body: [
    [column], [value]
]

Here’s an example of what it should be like: The first element of the "body" array is the table header, the other elements are the data.

body: [
    ['Qtd', 'Produto', 'Valor', 'SubTotal'], //Aqui é o header, não repete
    ['0', 'nome do produto', '00,00', '00,00'], //isso aqui se repete
    ['0', 'nome do produto', '00,00', '00,00'] //isso aqui se repete
]

See more examples here: PDFMAKE PLAYGROUND

Answer 3

Opa Diego tranquil, man I believe the error is in this line of code

widths: ['10%', '*', '20%', '20%']

If you change the value of * or leave only widths: ['10%'] to apply to all sides?