我尝试使用jsPDF从现有div创建和下载PDF。
我尝试了很多方法,但我无法实现。
我的最后一次尝试是@ViewChild
和ElementRef
,但不起作用。
细节devis.component.ts:
import {Component, ElementRef, ViewChild} from "angular2/core";
declare let jsPDF;
@Component({
selector: 'my-app',
template: `<div #test>
Hello world
</div>
<button type="button" (click)="test()">pdf</button>
<button (click)="download()">download</button>`
})
export class App {
@ViewChild('test') el: ElementRef;
constructor() {
}
public download() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.save('Test.pdf');
}
public test() {
let pdf = new jsPDF('l', 'pt', 'a4');
let options = {
pagesplit: true
};
pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
pdf.save("test.pdf");
});
}
}
有人知道用Angular 2实现这个目的的最简单方法吗?
答案 0 :(得分:11)
我想问题是ViewChild
给你一个ElementRef
这是一个角度类。您应该获取此对象的nativeElement
以获取实际的HtmlElement
:
@ViewChild('test') el:ElementRef;
createPdf(): void {
let pdf = new jsPDF('l', 'pt', 'a4');
let options = {
pagesplit: true
};
pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
pdf.save("test.pdf");
});
}
在您的plunkr中,您使用名称test
作为方法名称。显然有角度不喜欢那样。你需要重命名它。之后,您将遇到缺少库的问题:
您需要https://github.com/niklasvh/html2canvas或https://github.com/cburgmer/rasterizeHTML.js
将其中一个添加到您的项目中,它应该可以工作。请注意,函数addHtml
为deprecated
我已经开始工作了plunkr,我添加了html2canvas
。