SAP UI5中jsPDF报错：autoTable is not a function 求助

在SAP UI5项目中使用jsPDF库将表格数据转换为PDF文件时，执行下载PDF代码出现autoTable is not a function错误。目前jsPDF的基础文本生成PDF功能正常，但表格生成功能无法工作。

相关控制器代码 #

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/core/util/Export",
    "sap/ui/core/util/ExportTypeCSV"
],

function (Controller, JSONModel, Export, ExportTypeCSV) {
    "use strict";

    return Controller.extend("c.g.modalproject1.controller.Root", {
        onInit: function () {
            var oModel1 = new JSONModel("./model/vegetableDataJSON.json");
            this.getView().setModel(oModel1, "veg");
            console.log("data : ", oModel1);
        },

        openDialog1: function () {
            if (!this.pdialog1) {
                this.pdialog1 = this.loadFragment({
                    name: "c.g.modalproject1.fragments.mTables"
                });
            }
            this.pdialog1.then(function (oDialog) {
                oDialog.open();
            })
            new sap.m.MessageToast.show("Table Loaded");
        },

        closeDialog: function () {
            this.byId("newDialog1").close();
            sap.m.MessageToast.show("Table closed ! ");
        },

        downloadCSV: function () {
            sap.m.MessageToast.show("Downloading Excel..");
            var oExport = new Export({
                exportType: new ExportTypeCSV({
                    separatorChar: ","
                }),
                models: this.getView().getModel("veg"),
                rows: {
                    path: "/vegetablesRootNode"
                },
                columns: [{
                    name: "Title",
                    template: {
                        content: "{title}"
                    }
                },
                {
                    name: "Type",
                    template: {
                        content: "{type}"
                    }
                },
                {
                    name: "Description",
                    template: {
                        content: "{description}"
                    }
                },
                {
                    name: "Price",
                    template: {
                        content: "{price}"
                    }
                },
                {
                    name: "Rating",
                    template: {
                        content: "{rating}"
                    }
                }]
            });
            oExport.saveFile().catch(function (oError) {
                sap.m.MessageToast.show("Error when downloading data. Browser might not be supported!\n\n" + oError);
            }).then(function () {
                oExport.destroy();
            });
        },

        downloadPDF:function()
        {
            sap.m.MessageToast.show("Downloading into PDF started !");
            var oModel2 = this.getView().getModel("veg");
            console.log("check data = ", oModel2);

            var oColumns = ["Title","Type","Description","Price","Rating"];
            var oRows = [];
            oRows = oModel2.oData.vegetablesRootNode;
            console.log(oColumns);
            console.log(oRows);

            var pdfDoc = new jsPDF();
            pdfDoc.text(20, 20, "Vegetables Table");
            pdfDoc.autoTable(oRows, oColumns); // 报错位置

            pdfDoc.save("test.pdf");
        }
    });
});

解决方案 #

1. 原因

autoTable并非jsPDF核心库的内置方法，它是独立的扩展插件jspdf-autotable，必须单独引入才能使用。

2. 具体步骤

• 安装依赖：
  若使用npm管理项目，执行命令：

  npm install jspdf jspdf-autotable
  

  若手动引入，需在项目index.html中同时添加两个库的CDN链接：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
  

• 在UI5控制器中引入模块：
  修改sap.ui.define的依赖数组，添加jsPDF和autotable的模块路径（本地安装需确保UI5能解析模块）：

  sap.ui.define([
      "sap/ui/core/mvc/Controller",
      "sap/ui/model/json/JSONModel",
      "sap/ui/core/util/Export",
      "sap/ui/core/util/ExportTypeCSV",
      "jsPDF",
      "jspdf-autotable"
  ], function (Controller, JSONModel, Export, ExportTypeCSV, jsPDF) {
      "use strict";
      // autotable会自动挂载到jsPDF原型，无需单独接收参数
      // ... 控制器剩余代码
  });
  

• 修正autoTable调用语法：
  新版jspdf-autotable要求传入配置对象，而非旧版的参数顺序。修改downloadPDF函数如下：

  downloadPDF:function()
  {
      sap.m.MessageToast.show("Downloading into PDF started !");
      var oModel2 = this.getView().getModel("veg");
      const oColumns = ["Title","Type","Description","Price","Rating"];
      // 将数据转换为二维数组格式
      const oRows = oModel2.oData.vegetablesRootNode.map(item => [
          item.title,
          item.type,
          item.description,
          item.price,
          item.rating
      ]);
  
      var pdfDoc = new jsPDF();
      pdfDoc.text(20, 20, "Vegetables Table");
      // 使用新版配置对象调用autoTable
      pdfDoc.autoTable({
          head: [oColumns], // 表头需包裹为二维数组
          body: oRows
      });
  
      pdfDoc.save("test.pdf");
  }
  

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