"autoTable"属性在jsPDF类型中不存在。

Question

我正在使用 angular2 和 Node JS。我已经使用 npm 安装了 jspdf 和 jspdf-autotable 两个模块。 在 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”。

请问有人可以提供建议吗？

- Deep Kakkar

Answer 1

以下方法适用于我使用的 Angular 11，jsPDF 2.3.1 和 jspdf-autotable 3.5.14：

import jsPDF from 'jspdf'
import autoTable from 'jspdf-autotable'
  
public printTable() {

    const doc = new jsPDF('l', 'mm', 'a4'); 
    
    const head = [['ID', 'Country', 'Index', 'Capital']]
    const data = [
        [1, 'Finland', 7.632, 'Helsinki'],
        [2, 'Norway', 7.594, 'Oslo'],
        [3, 'Denmark', 7.555, 'Copenhagen'],
        [4, 'Iceland', 7.495, 'Reykjavík'],
        [5, 'Switzerland', 7.487, 'Bern'],
        [9, 'Sweden', 7.314, 'Stockholm'],
        [73, 'Belarus', 5.483, 'Minsk'],
    ]

    autoTable(doc, {
        head: head,
        body: data,
        didDrawCell: (data) => { },
    });

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

- John Chandler

---

我正在使用相同的方法，但是我似乎仍然无法使用autoTable.previous.finalY。有什么想法吗？ - Rafael Guimaraes Siqueira

数据不应该是一个数组，在此之后它就可以正常工作了。 - nevra

Answer 2

我得到了答案：

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

component.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");
        });
    });

- Deep Kakkar

---

我遇到了一个错误：doc.autoTableHtmlToJson不是一个函数。有人可以帮助我吗？ - Pushprajsinh Chudasama

尝试使用以下代码导入：var jsPDF = require('jspdf'); require('jspdf-autotable'); - Deep Kakkar

Answer 3

 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 as any).autoTable(columns, data);
doc.save('angular-demo.pdf');

- A.T Rayan

Answer 4

对于那些正在使用Angular 6/7的人，请尝试按照以下步骤操作：

不要仅仅使用以下代码：

declare var jsPDF: any;

试试这个：

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

对我来说，它运行良好。

- André Pacheco

---

嘿，我尝试了这个，但是出现了一个“无法设置未定义属性'autoTableText'”的错误。 - CodeMan03

抱歉我前几天没活动，你解决了问题吗？@CodeMan03 - Pushprajsinh Chudasama

Answer 5

假设这是一个 TypeScript 问题，并且你已经将 @types/jspdf 安装为 devDependency，那么你只需要扩展 jsPDF 类型即可...

import { jsPDF } from 'jspdf';
import 'jspdf-autotable';
import { UserOptions } from 'jspdf-autotable';

interface jsPDFCustom extends jsPDF {
    autoTable: (options: UserOptions) => void;
}

const doc = new jsPDF() as jsPDFCustom;

- Lane

Answer 6

嗨，我认为你需要使用 jspdf.plugin.autotable.min.js 和 jspdf.js 一起工作。 这是一个 GitHub 链接，你可以参考 https://github.com/simonbengtsson/jsPDF-AutoTable 以上链接中有示例。

    // app.component.ts or any other component
import { Component } from '@angular/core';

declare
var jsPDF: any; // Important

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app works!';

    constructor() {
        var doc = new jsPDF('p', 'pt');
        doc.autoTable(columns, data);
        doc.save("table.pdf");
    }
}

更新的示例：

    import { Component } from '@angular/core';
declare var jsPDF: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
  constructor() { 
    console.log('hi i m constr');
    var test = new jsPDF();
    console.dir(test.autoTable);
  }

}

- gusaindpk

---

我使用了你提到的同一个插件，但是它显示相同的错误。 - Deep Kakkar

好的，让我再检查一次。 - gusaindpk

https://github.com/simonbengtsson/jsPDF-AutoTable/issues/297 我也在那里提出了问题。 - Deep Kakkar

是的，我也在尝试一个示例，但无法使其正常工作。 - gusaindpk

如果你使用"declare var jsPDF: any;"而不是import语句，它就能工作。我认为jsPDF是一个全局对象，所以我们必须使用这个语句而不是imports。 - gusaindpk

同样的内容也在GitHub示例中提到了。 - gusaindpk