如何在角度5中使用jsPDF和jspdf-autotable

Question

我想在我的Angular 5.2.0项目中使用jsPDF和jspdf-autotable。我的package.json在下面（相关部分）：

"dependencies": {
    ...
    "jspdf": "^1.3.5",
    "jspdf-autotable": "^2.3.2"
    ...
}

我的angular-cli.json在下面（相关部分）：

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

我的组件（相关部分）：

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

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})
export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // typescript compile time error
        doc.save('table.pdf');
    }
}

它说：

[ts] Property 'autoTable' does not exist on type 'jsPDF'.

我试图用我的组件替换导入

// import * as jsPDF from 'jspdf';
// import 'jspdf-autotable';
declare var jsPDF: any;

然后没有编译时错误，但在运行downloadPDF（）函数时它说：

ERROR ReferenceError: jsPDF is not defined

Answer 1

为我工作Angular 5。

要在角度5中使用jspdf-autotable，必须通过npm安装jspdf和jspdf-autotable

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

还将jspdf和jspdf-autotable文件添加到angular-cli.json中的scripts数组中

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

并且在组件中永远不会导入jspdf或jspdf-autotable。

忘记以下导入。

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

只需使用Before @Component：

declare var jsPDF: any;

您的组件（相关部分）：

declare var jsPDF: any;

@Component({
    selector: "energy-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.scss"]
})

export class MyComponent implements OnInit {

    constructor() {}

    ngOnInit() {}

    downloadPDF() {

        let columns = ["ID", "Name", "Country"];
        let rows = [
            [1, "Shaw", "Tanzania"],
            [2, "Nelson", "Kazakhstan"],
            [3, "Garcia", "Madagascar"],
        ];

        let doc = new jsPDF('l', 'pt');
        doc.autoTable(columns, rows); // typescript compile time error
        doc.save('table.pdf');
        }
    }

Answer 2

首先，你在.js的styles属性中声明了angular-cli.json文件，你应该将它们添加到scripts。在您拥有的配置中，您应该将jspdf脚本添加到scripts中的angular-cli.json，所以：

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

那么你不必将任何jspdf导入你的组件。 declare var jsPdf: any足以使用它。

Answer 3

在angular-cli.json中

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

在你的项目中

import * as jsPdf from 'jspdf';
import 'jspdf-autotable';

这对我有用

Answer 4

要在角度5中使用jspdf-autotable，必须通过npm安装jspdf和jspdf-autotable

npm install jspdf-autotable --save

还将jspdf和jspdf-autotable文件添加到angular-cli.json中的scripts数组中

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

并且在组件中永远不会导入jspdf或jspdf-autotable

declare var jsPDF: any;

当然在使用jspdf-autotable之前，应该安装jspdf并通过npm安装@ types / jspdf

npm install jspdf --save
npm install @types/jspdf --save-dev

Answer 5

我正在使用角度7，只是declare var jsPDF: any;对我不起作用。经过一些谷歌搜索，解决方案是：

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

当然，我从npm安装了模块，并将它们包含在angular.json中的scripts数组中。它对我来说很好。

Answer 6

如果你可以使用declare var jsPDF：any;它也适用于Chrome，IE和其他浏览器，但它不适用于Firefox浏览器。

在这种情况下，您可以按照以下步骤操作：

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

和其他部分保持相同：

npm install jspdf --save
npm install @types/jspdf --save-dev
npm install jspdf-autotable --save

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

因此，它肯定适用于所有浏览器。多么简单:)

Answer 7

我解决了这个问题，首先从'jspdf'导入Jspd​​f import *作为jsPDF;我使用了codemells tatic，复制了jspdf autotable的内容并粘贴在jspdf.js中，然后对我来说工作正常。

在官方网站上说你必须使用// declare var jsPDF：any; //重要它在我的情况下不起作用，尝试从'jspdf'导入*作为jsPDF;代替。

在roles中的angular.json中：

"./node_modules/就是PDF/第三天/就是PDF.民.就是", "./node_modules/就是PDF-auto table/第三天/就是PDF.plugin.auto table.就是",

Answer 8

我能够像这样取悦TypeScript：

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

interface jsPDFWithPlugin extends jsPDF {
  autoTable: (options: UserOptions) => jsPDF;
}
...
const doc = new jsPDF('portrait', 'px', 'a4') as jsPDFWithPlugin;
doc.autoTable({
  head: [['Name', 'Email', 'Country']],
  body: [
    ['David', '[email protected]', 'Sweden'],
    ['Castille', '[email protected]', 'Norway']
  ]
});

适用于Angular 7。