如何在UI5应用中用jsPDF AutoTable动态添加列导出PDF表格？

阿华AIGC实验室

2026-5-19

解决方案：UI5动态列表格导出PDF（基于jsPDF）

我之前在做UI5项目时也碰到过固定行数、动态列的表格导出PDF需求，一开始用原生jsPDF手动绘制时也卡在了动态列的循环处理上，后来结合UI5的表格数据结构和jsPDF的API（包括常用的autoTable插件），整理了两个可行的实现方式，你可以根据自己的项目情况选择：

方式一：使用jsPDF-autoTable插件（推荐，代码更简洁）

这个插件专门用来处理PDF表格，对动态列的支持非常友好，只需要把UI5表格的列和数据转换成插件需要的格式即可。

步骤1：引入依赖

确保你的项目里已经引入了jsPDF和jspdf-autotable：

// 在UI5控制器里可以通过sap.ui.require引入
sap.ui.require([
  "sap/ui/core/ComponentSupport",
  "jspdf",
  "jspdf-autotable"
], function(ComponentSupport, jsPDF) {
  // 后续代码写在这里
});

步骤2：编写导出函数

在UI5控制器里添加导出按钮的点击事件处理函数：

onExportToPDF: function() {
  // 1. 获取UI5表格控件和数据
  const oTable = this.byId("yourTableId"); // 替换成你的表格ID
  const aColumns = oTable.getColumns(); // 获取动态列数组
  const aTableData = oTable.getModel().getData().yourDataPath; // 替换成你的数据路径

  // 2. 转换为autoTable需要的列配置和数据格式
  const aPdfColumns = aColumns.map(oColumn => {
    // 从UI5列中提取表头文本和数据字段
    const sHeaderText = oColumn.getHeader().getText();
    const sDataKey = oColumn.getTemplate().getBindingInfo("text").parts[0].path;
    return { title: sHeaderText, dataKey: sDataKey };
  });

  // 3. 初始化jsPDF实例
  const doc = new jsPDF.jsPDF("p", "mm", "a4");

  // 4. 生成PDF表格
  doc.autoTable({
    columns: aPdfColumns,
    body: aTableData,
    startY: 20, // 表格起始Y坐标
    theme: "striped", // 表格主题，可选：striped、grid、plain
    headStyles: { fillColor: "#2385bb" } // 表头样式
  });

  // 5. 保存PDF
  doc.save("动态列表格导出.pdf");
}

方式二：纯jsPDF手动绘制（无需插件）

如果不想引入额外插件，可以手动循环动态列来绘制表头和内容，核心是通过循环处理每一列的位置和内容：

导出函数示例

onExportToPDFManual: function() {
  const oTable = this.byId("yourTableId");
  const aColumns = oTable.getColumns();
  const aTableData = oTable.getModel().getData().yourDataPath;
  const columnCount = aColumns.length;
  const pageWidth = 210; // A4纸宽度，单位mm
  const colWidth = pageWidth / columnCount; // 均分列宽，也可以自定义列宽数组
  const startX = 10; // 表格起始X坐标
  let currentY = 20; // 起始Y坐标
  const rowHeight = 10; // 行高

  // 初始化jsPDF
  const doc = new jsPDF.jsPDF("p", "mm", "a4");
  doc.setFontSize(10);

  // 1. 绘制表头
  doc.setFont("helvetica", "bold");
  aColumns.forEach((oColumn, index) => {
    const sHeaderText = oColumn.getHeader().getText();
    const xPos = startX + index * colWidth;
    doc.text(sHeaderText, xPos + colWidth/2, currentY, { align: "center" });
    // 绘制表头单元格边框
    doc.rect(xPos, currentY - 5, colWidth, rowHeight);
  });
  currentY += rowHeight;

  // 2. 绘制表格内容
  doc.setFont("helvetica", "normal");
  aTableData.forEach((oRow, rowIndex) => {
    aColumns.forEach((oColumn, colIndex) => {
      const sDataKey = oColumn.getTemplate().getBindingInfo("text").parts[0].path;
      const cellText = oRow[sDataKey] || "";
      const xPos = startX + colIndex * colWidth;
      doc.text(cellText, xPos + colWidth/2, currentY, { align: "center" });
      // 绘制内容单元格边框
      doc.rect(xPos, currentY - 5, colWidth, rowHeight);
    });
    currentY += rowHeight;
  });

  // 保存PDF
  doc.save("动态列表格手动导出.pdf");
}