如何在 angular 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-cli.jsonstyles属性中声明了.js个文件，你应该将它们添加到scripts。在您的配置中，您应该将 jspdf 脚本添加到 angular-cli.json 中的 scripts，因此：

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

那么您不必将任何 jspdf 导入您的组件。 declare var jsPdf: any 够用了

Answer 2

要在 angular 5 中使用 jspdf-autotable，必须通过 npm

安装 jspdf 和 jspdf-autotable

npm install jspdf-autotable --save

还将 jspdf 和 jspdf-autotable 文件添加到 angular-cli 中的脚本数组。json

"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 3

在angular-cli.json

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

在你的项目中

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

这对我有用

Answer 4

为我工作Angular 5.

要在 angular 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": [
"../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';

只需在@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 5

我解决了这个问题，首先导入 Jspdf import * as jsPDF from 'jspdf'; 我使用了 codesmells tatic，复制了 jspdf autotable 的内容并粘贴到里面 jspdf.js，然后对我来说很好用。

在官方网站上说你必须使用 //declare var jsPDF: any; // 重要的。它在我的情况下不起作用，请尝试从 'jspdf' 导入 * as jsPDF；相反。

在 angular.json 在脚本中：

"./node_modules/jspdf/dist/jspdf.min.js", "./node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js",

Answer 6

我正在使用 angular 7，但 declare var jsPDF: any; 对我不起作用。经过一番谷歌搜索后，解决方案是：

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

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

Answer 7

如果您可以使用 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 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', 'david@example.com', 'Sweden'],
    ['Castille', 'castille@example.com', 'Norway']
  ]
});

在 Angular 7.

中工作

Answer 9

Angular 8 +

这就是我在 Angular 8 中所做的，请查看下面使用 faker 服务生成假用户的示例，您可以使用 API 响应更改它。

通过 npm 安装包

npm i jspdf jspdf-autotable faker --save

安装类型

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

将以下条目添加到 angular.json

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

component.ts


import * as faker from 'faker'; // Not really require by jspdf or jsPDF-AutoTable 
declare var jsPDF: any;


@Component({
  selector: 'faker',
  templateUrl: './faker.component.html',
})


export class FakerPDFGeneratorComponent {



 headRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

    footRows() {
    return [{id: 'ID', name: 'Name', email: 'Email', city: 'City', expenses: 'Sum'}];
  }

   bodyRows(rowCount) {
    rowCount = rowCount || 10;
    let body = [];
    for (var j = 1; j <= rowCount; j++) {
      body.push({
        id: j,
        name: faker.name.findName(),
        email: faker.internet.email(),
        city: faker.address.city(),
        expenses: faker.finance.amount(),
      });
    }
    return body;
  }

createPdf() {
    var doc = new jsPDF();

    doc.setFontSize(18);
    doc.text('With content', 14, 22);
    doc.setFontSize(11);
    doc.setTextColor(100);

    // jsPDF 1.4+ uses getWidth, <1.4 uses .width
    var pageSize = doc.internal.pageSize;
    var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth();
    var text = doc.splitTextToSize(faker.lorem.sentence(45), pageWidth - 35, {});
    doc.text(text, 14, 30);

    doc.autoTable({
      head: this.headRows(),
      body: this.bodyRows(40),
      startY: 50,
      showHead: 'firstPage'
    });

    doc.text(text, 14, doc.autoTable.previous.finalY + 10);

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

}

继续尝试代码和演示

Answer 10

将 doc 声明为任何类型。这将修复错误“[ts] 属性 'autoTable' 在类型 'jsPDF' 上不存在。”

let doc:any = new jsPDF('l', 'pt');

Answer 11

在我的例子中 //@ts-ignore 有效....

//@ts-ignore
doc.autoTable(this.exportColumns, this.exportData);
doc.save('filename.pdf');

如果您的代码运行完美，但在 ng serve 和 ng build 期间显示自动错误，那么 //@ts-ignore 将帮助您忽略 ng serve 和 ng build 期间的错误检查。只需将 //@ts-ignore 放在显示错误的行上方。

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

how to use jsPDF and jspdf-autotable in angular 5

angular

jspdf

jspdf-autotable

Angular 8 +

继续尝试代码和演示

在我的例子中 //@ts-ignore 有效....