属性 'autoTable' 在 jsPDF 类型上不存在

Question

我正在使用 angular2 和 Node JS。我已经使用 npm 安装了 jspdf and 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");

但是现在当我运行节点命令启动应用程序然后在编译期间我收到错误：

Property 'autoTable' does not exist on type 'jsPDF'.

谁能推荐一下？

Answer 1

您好，我认为您必须同时使用 jspdf.plugin.autotable.min.js 和 jspdf.js 才能工作。这里是githublink大家可以参考https://github.com/simonbengtsson/jsPDF-AutoTable 上面的样本 link.

    // 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);
  }

}

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

Answer 3

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

而不是仅仅使用这个：

declare var jsPDF: any;

试试这个：

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

对我来说效果很好。

Answer 4

以下在 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');
}

Answer 5

假设这是一个打字稿问题，并且您已 @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;

Answer 6

 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();

the Magic Here (doc as any)

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

属性 'autoTable' 在 jsPDF 类型上不存在

Property 'autoTable' does not exist on type jsPDF

javascript

jspdf

typescript

jspdf-autotable

angular