使用jsPDF 生成pdf并能够使用html模板生成pdf。
ts
如下
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('content') content: ElementRef;
title = 'app';
constructor() { }
ngOnInit() {
}
downloadPDF() {
const doc = new jsPDF();
doc.text('Some Text here', 10, 10);
doc.save('test.pdf');
}
exportHTML() {
let doc = new jsPDF();
let specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
let content = this.content.nativeElement;
doc.fromHTML(content.innerHTML, 15, 15, {
'width': 190,
'elementHandlers': specialElementHandlers
});
doc.save('htmltopdf.pdf');
}
}
以下是Html
:
<div style="text-align:center">
<input type="button" (click)="downloadPDF()" value="Generate And Export">
<input type="button" (click)="exportHTML()" value="Export Using HTML">
</div>
<div #content style="display:none">
<p>Below Content will be exported to PDF</p>
<div id="content" style="width: 100px;">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae ipsa repel
vitae.
</div>
</div>
但是当css应用于填充等元素时,margin,text-align会反映在生成的PDF中。
如何在生成的PDF中添加自定义样式。