在Angular 2上从div创建并下载pdf [英] Create and download pdf from div on angular 2
问题描述
我正在尝试使用jsPDF从现有的div创建和下载PDF.
I'm trying to create and download an PDF from an existing div with jsPDF.
我尝试了很多方法,但我无法实现.
I have tried many ways but I can't achieve it.
我的上一次尝试是使用@ViewChild
和ElementRef
,但是没有用.
My last try was with @ViewChild
and ElementRef
but doesn't work to.
detail-devis.component.ts:
detail-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实现这一目标的最简单方法吗?
Someone know the simplest way to achieve this with Angular 2?
推荐答案
我想问题是ViewChild
给你一个ElementRef
这是一个有角类.您应该获取该对象的nativeElement
以获得实际的HtmlElement
:
I guess the problem is that ViewChild
gives you an ElementRef
which is an angular class. You should get the nativeElement
of this object to get the actual 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
用作方法名称.显然,角度不喜欢那样.您需要重命名.之后,您将遇到缺少库的问题:
In your plunkr you use the name test
for a method name. Apparently angular doesn't like that. You need to rename that. After that you will encounter the problem that you are missing a library:
您需要 https://github.com/niklasvh/html2canvas 或将其中之一添加到您的项目中,它应该可以工作.请注意,虽然功能
addHtml
已已弃用Add one of these to your project, and it should work. Note though that the function
addHtml
is deprecated我已经制作了一个有效的 plunkr ,在其中添加了
html2canvas
.I've made a working plunkr, where I added
html2canvas
.这篇关于在Angular 2上从div创建并下载pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!