角度8 +

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": [
"../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 2

首先，您已在.js的{{1}}媒体资源中声明了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足以使用它。

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'中将Jspdf import *作为jsPDF导入；我用了一个codemells tatic，复制了jspdf autotable的内容并粘贴到里面 jspdf.js，然后对我来说效果很好。

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

在脚本的angular.json中：

“。/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

角度8 +

这是我在Angular 8中所做的操作，请检查下面的示例，该示例使用伪造的服务生成伪造的用户，您可以使用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

就我而言 //@ts-ignore 有效....

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

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

Answer 11

将文档声明为任何类型。这样可以解决错误“类型'jsPDF'不存在[ts]属性'autoTable'。”

let doc：any = new jsPDF（'l'，'pt'）;

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

11 个答案:

角度8 +

继续进行代码和演示

就我而言 //@ts-ignore 有效....