如何在angular 5中使用jsPDF和jspdf-autotable
如何在angular 5中使用jsPDF和jspdf-autotable
提问于 2018-03-23 16:26:52
我正在尝试在我的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回答 9
Stack Overflow用户
回答已采纳
发布于 2018-03-23 17:30:22
要在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-devStack Overflow用户
发布于 2019-04-30 07:37:36
我能够像这样取悦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中工作。
Stack Overflow用户
发布于 2019-01-24 01:25:52
我使用的是angular 7，declare var jsPDF: any;对我不起作用。在谷歌搜索之后，解决方案是：
declare const require: any;
const jsPDF = require('jspdf');
require('jspdf-autotable');当然，我还安装了来自npm的模块，并将它们包含到angular.json的脚本数组中。它对我来说很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49445269
复制相关文章
相似问题