如何用Angular 4与jsPDF将数组导出为两个不同PDF表格？

当然可以做到！我之前也处理过类似需求，用jsPDF配合jspdf-autotable插件就能轻松实现，下面是具体步骤：

1. 安装依赖 #

首先需要安装核心的jsPDF和表格插件（原生jsPDF手动画表格太繁琐，这个插件能帮我们自动生成规整的表格）：

npm install jspdf jspdf-autotable --save

2. 在组件中导入模块 #

在你要实现导出功能的Angular组件里，导入需要的模块：

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

3. 编写导出函数 #

先定义你的数据源，然后写一个导出函数，把数据拆分成两个表格，依次添加到PDF中：

// 你的原始数据
const userData = [
  {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234},
  {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
  {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
];

exportToPdf() {
  // 初始化PDF实例，默认纵向A4纸，单位mm
  const pdfDoc = new jsPDF();

  // --- 生成第一个表格：Company + FName ---
  const table1Headers = ['Company', 'FName'];
  // 从原始数据中提取需要的列
  const table1Rows = userData.map(user => [user.Company, user.FName]);

  pdfDoc.autoTable({
    head: [table1Headers],
    body: table1Rows,
    startY: 20, // 距离顶部20mm，避免内容顶格
    headStyles: { fillColor: '#3f51b5' }, // 自定义表头背景色
    theme: 'striped' // 表格样式可选：striped/grid/plain
  });

  // --- 生成第二个表格：LName + ID ---
  const table2Headers = ['LName', 'ID'];
  const table2Rows = userData.map(user => [user.LName, user.ID]);

  // 获取第一个表格的结束位置，再加10mm间距，避免两个表格重叠
  const firstTableEndPosition = pdfDoc.lastAutoTable.finalY + 10;
  pdfDoc.autoTable({
    head: [table2Headers],
    body: table2Rows,
    startY: firstTableEndPosition,
    headStyles: { fillColor: '#f44336' },
    theme: 'striped'
  });

  // 保存PDF文件
  pdfDoc.save('user-tables.pdf');
}

4. 调用导出函数 #

你可以在组件的模板里加一个按钮，点击触发导出：

<button (click)="exportToPdf()">导出PDF</button>

额外说明 #

• 如果不想用jspdf-autotable，也可以用jsPDF原生的text()和line()方法手动绘制表格，但需要自己处理单元格对齐、换行等细节，效率远不如插件
• 你可以根据需求调整表格的样式，比如字体大小、边框宽度、单元格对齐方式等，只需要修改autoTable的配置参数即可
• 要是遇到导入模块的问题（Angular 4版本可能和新依赖有兼容小问题），可以试试把导入语句改成import jsPDF from 'jspdf';，或者检查依赖版本是否匹配

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