如何在离子2中使用jspdf显示json数据？

Question

我使用jspdf创建了一个pdf文件。我想使用table在jspdf中显示json数据。我用了＃doc; doc.autoTable＆＃39;以table的形式显示数据。如何在表格中显示json数据。

html代码

<button ion-button (click)="exportpdf()">Download</button>

ts代码

exportpdf(){
    var item=this.display;
    console.log(item);
    var columns = ["Employee Name", "PRESENT","ABSENT","OFFDAY","LEAVE","LATE"];
    var rows = [];

    for(var key in item){
         var temp = [key, item[key]];
         rows.push(temp);
         console.log(temp,"temp");
       }


    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, rows);
    doc.setFontStyle('Bold');
    doc.setFontSize(14);

    doc.save('Test.pdf');
  }

Answer 1

在模板中添加管道以查看商品<pre>temp|json</pre>

他们将在模板中看到您的对象输出。

Answer 2

PRESENT 字段是一个对象

exportpdf() {
  const item = this.display;
  const columns = [
    {title: "Employee Name", dataKey: "EmployeeName"},
    {title: "PRESENT", dataKey: "PRESENT", displayProperty: "${yourPropertyName}"},
    {title: "ABSENT", dataKey: "ABSENT"},
    {title: "OFFDAY", dataKey: "OFFDAY"},
    {title: "LEAVE", dataKey: "LEAVE"},
    {title: "LATE", dataKey: "LATE"},
  ];
  const rows = [];
  for (let key in item) {
    rows.push({key: item[key]});
  }

  const doc = new jsPDF();
  doc.autoTable({
    body: [...rows],
    columns: [...columns],
    styles: {
      fontWeight: 'bold',
      fontSize: 14
    },
    didParseCell: (data) => {
      if (data.column.dataKey === 'PRESENT') {
        const prop = data.column.raw.displayProperty;
        if (data.cell.raw[prop]) data.cell.text = data.cell.raw[prop];
      }
    }
  });
  doc.save('Test.pdf');
}