我是角度 2 的新手，需要使用 jspdf 将我的 html 组件以角度 2 导出为 pdf 的功能。我需要使用 jspdf 将动态生成的 HTML(表格格式)转换为 pdf。示例代码和 plunker 链接如下：
import {Component, ElementRef, ViewChild} from "angular2/core";
declare let jsPDF;
@Component({
selector: 'my-app',
template: `
<button (click)="pdfHtml()">Download to PDF</button>
<table #test>
<thead >
<th class="my-class">Name</th>
</thead>
<tbody>
<tr *ngFor="#hero of heroes" >
<td><svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg></td>
<td>{{hero.name}}</td>
</tr>
</tbody>
</table>
`,
styles: [
`
.my-class {
background-color: yellow;
}
`
]
})
export class App {
@ViewChild('test') el: ElementRef;
isClassVisible: true;
heroes = [
{id: 1, name:'Superman'},
{id: 2, name:'Batman'},
{id: 5, name:'BatGirl'},
{id: 3, name:'Robin'},
{id: 4, name:'Flash'},
{id: 1, name:'Superman'},
{id: 2, name:'Batman'},
{id: 5, name:'BatGirl'},
{id: 3, name:'Robin'},
{id: 4, name:'Flash'}
];
constructor() {
}
public download() {
var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.save('Test1.pdf');
}
public pdfHtml() {
alert(this.el.nativeElement.innerHTML);
let pdf = new jsPDF();
let options = {
pagesplit: true
};
pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {
pdf.save("test1.pdf");
});
}
}