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");
});
}
}<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>我是jspdf的新手，尝试使用jspdf而不使用jquery将动态生成的HTML表转换为pdf。请检查下面的评论中的plunker：
我正在使用angular2，需要将html转换为pdf。
1条答案
按热度按时间owfi6suc1#
尝试在代码中添加以下内容：