如何使用 pdfMake 处理动态数据

Question

我是 angular 的新手，我正在尝试使用 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 需要是一个数组数组：

第一个数组是 header（如 thead/tr/th）
第二个数组将是第一个数据行（如 tbody/tr/td）
第三个数组 -> 第二个数据行，依此类推

Concat 只会 return 一个新数组，其中包含 header 数组，后跟每个员工数据的数组（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 处理动态数据

How to use pdfMake with dynamic data

html

javascript

typescript

pdfmake

angular