Question

我刚开始使用Angle，我尝试使用pdfMake，我可以将其用于静态数据，但不能通过动态数据来实现，如果能帮助我实现这一点，我将不胜感激，因为我已经在互联网上进行了搜索，但无法完全了解如何实现这一目标。预先感谢。

employees.component.ts

getAllEmployees(){
    this.restService.GetAllEmployees().subscribe((res: any) => {
    this.employees = res.data.employees
    for(var i = 0; i< this.employees.length; i++) {
    this.array = this.employees[i]
    console.log(this.array)
    }
  })
}

generatePdf(){
  const documentDefinition = this.getDocumentDefinition();
  pdfMake.createPdf(documentDefinition).open();
}

getDocumentDefinition() {
  return {
    content: [
        {
        table: {
          headerRows: 4,
          widths: [ '*', 'auto', 100, '*' ],
          body: [
            [ 'Name', 'Second', 'Third', 'The last one' ],
            [ this.array.firstName_FL, 'Value 2', 'Value 3', 'Value 4' ],
          ]
        }
      }
    ]    
  };
}
ExportAsPDF(){
  this.generatePdf();
}

我已经尝试过使用this.array.firstName_FL，但是它只带有最后一个索引

Answer 1

尝试类似这样的方法。请注意，这未经测试。

getDocumentDefinition() {
    return {
        content: [
            {
            table: {
            headerRows: 4,
            widths: [ '*', 'auto', 100, '*' ],
            body: [[ 'Name', 'Second', 'Third', 'The last one' ]]
                .concat(this.employees.map((el, i) => [el.firstName_FL, el['secondPropHere'], el['thirdPropHere'], el['fourthPropHere']]))
            }
        }
        ]    
    };
}

很抱歉格式化，让我知道是否可行。其背后的整个想法是，body最后必须是一个数组数组：

第一个数组为标头（如thead / tr / th）
第二个数组将是第一个数据行（如tbody / tr / td中一样）
第三个数组->第二个数据行，等等

Concat只会返回一个新数组，其中包含标头数组，然后是每个员工数据的数组（map高阶函数）。

el['secondPropHere'] - just remove square brackets and use the dot notation to get your desired property for the second prop, like `el.secondProp`.

如何对动态数据使用pdfMake

1 个答案: