问题描述
我想以角度6从html导出pdf.因此,我正在使用jspdf
库.但是我不能给出颜色和背景色之类的样式.我怎样才能做到这一点? (如果还有来自jspdf
的其他免费库,我可以使用它)您可以从下面的链接中查看演示.
I want to export pdf from html in angular 6. So, I'm using jspdf
library. But I can't giving styling like color and background color. How can I achieve this? (If is there any other free library from jspdf
, I can use it) You can see demo from below link.
.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>
推荐答案
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导入代码中
With this, we have to import jsPDF and html2Canvas to the code
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
为此,您必须执行npm安装以下内容
for this, you have to do npm install the following
npm install jspdf --save
npm install --save @types/jspdf
npm install html2canvas --save
npm install --save @types/html2canvas
通过此操作,在scripts标记内的angular.json文件中添加以下内容
With this add the following in the angular.json file inside the scripts tag
"node_modules/jspdf/dist/jspdf.min.js"
例如,在component.html内添加如下代码:
Inside the component.html add code like this for example:
<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>
使用此代码添加css,就像通常添加到component.css中一样,它将被呈现.
with this code add css how you would normally add in component.css , it would be rendered.
希望,这可以解决您的问题.
Hope, this solves your problem.
这篇关于从Angular 6中的HTML导出PDF的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!