1

Estou construindo um pdf de uma venda. Estou realizando testes com dados fictícios para validação do layout do documento. Porém o layout está "estourando" ao percorrer o for.

O meu código é esse:

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);
}

O resultado que estou obtendo é este da imagem, eu preciso que as colunas e linhas sejam preenchidas dinamicamente, conforme o for é percorrido. O meu cabeçalho da tabela será estático, mas as informações sempre serão dinâmicas, já que ele irá percorrer um array de itens da venda:

inserir a descrição da imagem aqui

O que eu espero obter é:

inserir a descrição da imagem aqui

3 Respostas 3

1

Tem um certo tempo o post, porém vou colocar uma possível solução.

O .push cria um array a cada posição de elemento encontrada.

Se você observar no console, ele terá um array com cada resultado encontrado. Exemplo:

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

Ficara assim:

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

Fazendo com que o pdfMake entenda que cada um desse array é uma linha nova.

Minha solução aqui na ferramenta foi alocar cada campo em uma variável (não é uma solução 100%, mas me atendeu). Exemplo:

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

E dentro do body ir referenciado as colunas que deseja

[header1, header2]
[prop1, prop2]
0

Opa Diego tranquilo, cara acredito que o erro esta nesta linha de código

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

Se você mudar o valor do * ou deixar apenas widths: ['10%'] para aplicar a todos lados?

1
  • Rapaz, sem sucesso. Fiz a mudança mas continua do mesmo jeito... Commented 4/06/2019 às 20:50
0

Seu código está com um problema nesse trecho.

body: [
    [column], [value]
]

Veja um exemplo de como deveria ser: O primeiro elemento do array "body" é o header da tabela, os outros elementos são os dados.

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
]

Veja mais exemplos aqui: PDFMAKE PLAYGROUND

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .