jsPDF 类型上不存在属性“autoTable”

Question

我正在使用angular2和Node JS。我已经使用.jspdf和jspdf-autotable安装了这两个模块npm。在 angular-cli.json 文件中，我嵌入了脚本：

"scripts": [ 
        "../node_modules/jspdf/dist/jspdf.min.js",
        "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
      ],

在我的component.ts文件中，我按如下方式导入了这些文件：

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

我也试过这些行来导入 jspdf-autotable

import { autoTable } from 'jspdf-autotable'; 
import 'jspdf-autotable';

但没有任何效果。

在component.ts文件功能中，我使用的示例代码如下：

var columns = ["ID", "Country", "Rank", "Capital"];
        var data = [
            [1, "Denmark", 7.526, "Copenhagen"],
            [2, "Switzerland",  7.509, "Bern"],
            [3, "Iceland", 7.501, "Reykjavík"],
            [4, "Norway", 7.498, "Oslo"],
            [5, "Finland", 7.413, "Helsinki"]
        ];
        var doc = new jsPDF();
        doc.autoTable(columns, data);
        doc.output("dataurlnewwindow");

但是现在当我运行 node 命令来启动应用程序时，在编译过程中我收到如下错误：

类型“jsPDF”上不存在属性“autoTable”。

有人可以建议吗？

Answer 1

以下内容在 Angular 11、jsPDF 2.3.1、jspdf-autotable 3.5.14 中对我有用：

\n

import jsPDF from \'jspdf\'\nimport autoTable from \'jspdf-autotable\'\n  \npublic printTable() {\n\n    const doc = new jsPDF(\'l\', \'mm\', \'a4\'); \n    \n    const head = [[\'ID\', \'Country\', \'Index\', \'Capital\']]\n    const data = [\n        [1, \'Finland\', 7.632, \'Helsinki\'],\n        [2, \'Norway\', 7.594, \'Oslo\'],\n        [3, \'Denmark\', 7.555, \'Copenhagen\'],\n        [4, \'Iceland\', 7.495, \'Reykjav\xc3\xadk\'],\n        [5, \'Switzerland\', 7.487, \'Bern\'],\n        [9, \'Sweden\', 7.314, \'Stockholm\'],\n        [73, \'Belarus\', 5.483, \'Minsk\'],\n    ]\n\n    autoTable(doc, {\n        head: head,\n        body: data,\n        didDrawCell: (data) => { },\n    });\n\n    doc.save(\'table.pdf\');\n}\n

\n

Answer 2

 var columns = ['ID', 'Country', 'Rank', 'Capital'];\nvar data = [\n  [1, 'Denmark', 7.526, 'Copenhagen'],\n  [2, 'Switzerland', 7.509, 'Bern'],\n  [3, 'Iceland', 7.501, 'Reykjav\xc3\xadk'],\n  [4, 'Norway', 7.498, 'Oslo'],\n  [5, 'Finland', 7.413, 'Helsinki'],\n];\nvar doc = new jsPDF();\n

\n

\n

这里的魔力（任意文档）

\n

\n

(doc as any).autoTable(columns, data);\ndoc.save('angular-demo.pdf');\n

\n

Answer 3

我得到了答案：

无需在 component.ts 文件中导入 jspdf 或 jspdf-autotable。

组件.ts：

import { Component, Input, OnInit, Inject } from '@angular/core';
declare let jsPDF;

就我而言

var doc = new jsPDF('l', 'mm', [305, 250]);

var options1 = {
   padding: 50
};

doc.addHTML($('#riskdate_heading'),0,10,options1 ,() => {

   doc.addHTML($('#risktitle'),0,30,options1, () => {

     var res = doc.autoTableHtmlToJson(document.getElementById("riskTable"));

                var header = function(data) {
                    doc.setFontSize(18);
                    doc.setTextColor(40);
                    doc.setFontStyle('normal');
                };

                var riskoptions = {
                                    tableWidth: 'auto',
                                    addPageContent: header,
                                    margin: {  top: 10, horizontal: 7 },
                                    startY:  50,
                                    columnStyles: {0: {columnWidth: 'wrap'}}
                                };

                doc.autoTable(res.columns, res.data, riskoptions);

                doc.save("table.pdf");
        });
    });

Answer 4

对于那些使用 Angular 6/7 的人，请尝试执行以下操作：

而不是仅仅使用这个：

declare var jsPDF: any;

尝试这个：

declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');

对我来说效果很好。