如何在Ionic 2中使用jsPDF将JSON数据以表格形式展示？

看起来你在构建表格行的时候格式不对——你现在把每个员工的完整对象塞到了表格的第二列，而不是把对象里的每个字段拆分到对应的列中。我来帮你修正代码，同时优化一些细节：

关键问题分析 #

你的columns定义了6列，但原来的循环只生成了2个元素的行（[key, item[key]]），这会导致表格数据错位。我们需要把item[key]里的每个属性（PRESENT、ABSENT等）分别提取出来，对应到列的位置。

修正后的完整代码 #

假设你的this.display是一个以员工姓名为key、考勤数据为值的对象（比如{ "张三": { PRESENT: 20, ABSENT: 2, ... } }），修正后的TS代码如下：

exportpdf() {
  const item = this.display;
  console.log(item);
  
  // 表格列定义
  const columns = ["Employee Name", "PRESENT", "ABSENT", "OFFDAY", "LEAVE", "LATE"];
  const rows: any[] = [];

  // 遍历数据，构建符合要求的表格行
  for (const key in item) {
    // 避免遍历原型链上的属性
    if (item.hasOwnProperty(key)) {
      const employeeData = item[key];
      // 按列顺序提取每个字段，空值默认填0
      const row = [
        key,
        employeeData.PRESENT || 0,
        employeeData.ABSENT || 0,
        employeeData.OFFDAY || 0,
        employeeData.LEAVE || 0,
        employeeData.LATE || 0
      ];
      rows.push(row);
    }
  }

  const doc = new jsPDF('p', 'pt');
  
  // 先设置标题样式，再添加报告标题
  doc.setFontStyle('Bold');
  doc.setFontSize(14);
  doc.text('Employee Attendance Report', 40, 30);

  // 使用autoTable的对象配置（更灵活），避免标题和表格重叠
  doc.autoTable({
    head: [columns],
    body: rows,
    startY: 50, // 表格从Y轴50的位置开始
    headStyles: {
      fillColor: '#f0f0f0',
      fontStyle: 'bold',
      textColor: '#000'
    }
  });

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

如果你的display是数组形式 #

如果this.display是员工对象数组（比如[{ name: "张三", PRESENT: 20, ... }, ...]），只需要把循环部分改成下面这样：

// 遍历数组形式的员工数据
for (const employee of item) {
  const row = [
    employee.name,
    employee.PRESENT || 0,
    employee.ABSENT || 0,
    employee.OFFDAY || 0,
    employee.LEAVE || 0,
    employee.LATE || 0
  ];
  rows.push(row);
}

额外优化点 #

1. 添加了hasOwnProperty检查，避免遍历到对象原型链上的无关属性
2. 处理了空值情况，用|| 0确保表格不会出现空白
3. 调整了字体样式的顺序，确保标题样式生效
4. 使用autoTable的对象配置方式，支持自定义表头样式和表格位置，避免标题和表格重叠
5. 重命名了PDF文件名，更贴合业务场景

内容的提问来源于stack exchange，提问作者Kirandeep Kaur