jsPDF未定义离子3答案

【问题标题】：jsPDF not defined Ionic 3jsPDF未定义离子3
【发布时间】：2018-08-22 16:50:04
【问题描述】：

我正在尝试使用我通过安装的 jspdf-autotable 模块

npm install jspdf jspdf-autotable

要在我的 Ionic 组件中使用该模块，我执行了以下操作：

declare let jsPDF;

然后我继续从我的组件中的 jspdf-autotable 存储库中获取一些示例代码：

  createReport() {
    let columns = ["ID", "Name", "Age", "City"]
    let data = [
      [1, "Jonathan", 25, "Gothenburg"],
      [2, "Simon", 23, "Gothenburg"],
      [3, "Hanna", 21, "Stockholm"]
    ]
    let doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, data);
    doc.save("table.pdf");
  }

在调用 createReport() 时，我收到以下错误消息：ReferenceError: jsPDF is not defined

如何正确导入 jspdf-autotable？任何帮助将不胜感激

【问题讨论】：

标签： ionic-framework npm jspdf jspdf-autotable

【解决方案1】：

您需要导入插件并将 jsPDF 声明为组件中的全局变量。

import * as jsPDF from 'jspdf'

declare var jsPDF: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

【讨论】：

感谢@jraspante 的建议，但是使用 WebStorm 时出现以下错误：导入声明与“jsPDF”的本地声明发生冲突
尝试删除全局声明

【解决方案2】：

这最终对我有用：

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

出于某种原因，仅按以下方式指定行和列会起作用：

var columns = [
    {title: "ID", dataKey: "id"},
    {title: "Name", dataKey: "name"}, 
    {title: "Country", dataKey: "country"}, 
    ...
];
var rows = [
    {"id": 1, "name": "Shaw", "country": "Tanzania", ...},
    {"id": 2, "name": "Nelson", "country": "Kazakhstan", ...},
    {"id": 3, "name": "Garcia", "country": "Madagascar", ...},
    ...
];

【讨论】：