我想从angular 6中的html导出pdf。所以，我使用jspdf库。但我不能给出像颜色和背景色这样的造型。我怎样才能做到这一点(如果jspdf还有其他免费库，我可以使用它(您可以从下面的链接中看到演示。
演示
.ts文件
export class AppComponent {
@ViewChild('reportContent') reportContent: ElementRef;
downloadPdf() {
const doc = new jsPDF();
const specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
const content = this.reportContent.nativeElement;
doc.fromHTML(content.innerHTML, 15, 15, {
'width': 190,
'elementHandlers': specialElementHandlers
});
doc.save('asdfghj' + '.pdf');
}
}
.html文件
<div #reportContent class="p-col-8 p-offset-2">
<table>
<tr>
<td style="color: red;background-color: blue;border:solid;">1111
</td>
<td style="border:solid;">2222
</td>
</tr>
</table>
</div>
<button pButton type="button" label="Pdf" (click)="downloadPdf()">Export Pdf</button>
您可以使用jsPDF和dom to image包导出带有id='dashboard'的HTMLdiv。
安装包
import * as domtoimage from 'dom-to-image';
import * as FileSaver from 'file-saver';
import * as jsPDF from 'jspdf';
TS文件
domtoimage.toPng(document.getElementById('dashboard'))
.then(function (blob) {
var pdf = new jsPDF('l', 'pt', [$('gridster').width(), $('gridster').height()]);
pdf.addImage(blob, 'PNG', 0, 0, $('gridster').width(), $('gridster').height());
pdf.save(`${that.dashboardName}.pdf`);
});
HTML
<gridster id='dashboard'></gridster>
captureScreen() {
const pdf = new jsPDF('p', 'mm');
const promises = $('.pdf-intro').map(function(index, element) {
return new Promise(function(resolve, reject) {
html2canvas(element, { allowTaint: true, logging: true })
.then(function(canvas) {
resolve(canvas.toDataURL('image/jpeg', 1.0));
})
.catch(function(error) {
reject('error in PDF page: ' + index);
});
});
});
Promise.all(promises).then(function(dataURLS) {
console.log(dataURLS);
for (const ind in dataURLS) {
if (dataURLS.hasOwnProperty(ind)) {
console.log(ind);
pdf.addImage(
dataURLS[ind],
'JPEG',
0,
0,
pdf.internal.pageSize.getWidth(),
pdf.internal.pageSize.getHeight(),
);
pdf.addPage();
}
}
pdf.save('HTML-Document.pdf');
});
}
有了这个，我们必须将jsPDF和html2Canvas导入到代码中
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
为此，您必须进行npm安装以下
npm install jspdf --save
npm install --save @types/jspdf
npm install html2canvas --save
npm install --save @types/html2canvas
在脚本标签内的angular.json文件中添加以下内容
"node_modules/jspdf/dist/jspdf.min.js"
在component.html中添加如下代码，例如：
<div>
<input type="button" value="CPTURE" (click)="captureScreen()" />
</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>
<div class="pdf-intro">HTHML content</div>有了这段代码，就可以像通常在component.css中添加的那样添加css，它就会被渲染。
希望，这能解决你的问题。
html2canvas将解决您的问题。更新你的代码如下。
downloadPdf() {
const doc = new jsPDF();
const content = this.reportContent.nativeElement;
html2canvas(content).then(canvas => {
const imgData = canvas.toDataURL('image/png');
// Few necessary setting options
const imgWidth = 208;
const pageHeight = 295;
const imgHeight = canvas.height * imgWidth / canvas.width;
const doc = new jspdf('p', 'mm');
let heightLeft = imgHeight;
let position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
// Generated PDF
doc.save('asdfghj' + '.pdf');
});
}
[https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/][1npm安装jspdf
要安装html2canvas包，请使用给定的npm命令。npm install html2canvas
当我们完成安装部分时，是时候使用import语句将其导入到我们的组件中了。
> import * as jspdf from 'jspdf'; import html2canvas from
> 'html2canvas';
<div id="content" #content>
<mat-card>
<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 6</strong>
</div>
<div>
<input type="button" value="CPTURE" (click)="captureScreen()"/>
</div>
</mat-card>
</div>
<div >
<mat-card>
<table id="contentToConvert">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
</table>
</mat-card>
</div>
import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-htmltopdf',
templateUrl: './htmltopdf.component.html',
styleUrls: ['./htmltopdf.component.css']
})
export class HtmltopdfComponent{
public captureScreen()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('MYPdf.pdf'); // Generated PDF
});
}
}
new JsPDF(
Orientation, // Landscape or Portrait
unit, // mm, cm, in
format // A2, A4 etc
);
使用这种方式stackblitz示例在你的演示中以这种方式使用
import {jsPDF} from 'jspdf';
public downloadPDF() {
const doc = new jsPDF();
.....
}