问题描述
限时送ChatGPT账号..我想从 html 以 angular 6 导出 pdf.所以,我使用 jspdf
库.但我不能给出像颜色和背景颜色这样的样式.我怎样才能做到这一点?(如果jspdf
还有其他免费的库,我可以用)你可以从下面的链接看到演示.
演示
.ts 文件
导出类 AppComponent {@ViewChild('reportContent') 报告内容:ElementRef;下载PDF(){const doc = 新的 jsPDF();const specialElementHandlers = {'#editor':函数(元素,渲染器){返回真;}};const content = this.reportContent.nativeElement;doc.fromHTML(content.innerHTML, 15, 15, {宽度":190,'elementHandlers':specialElementHandlers});doc.save('asdfghj' + '.pdf');}}
.html 文件
<表格><tr><td style="color: red;background-color: blue;border:solid;">1111</td><td style="border:solid;">2222</td></tr><button pButton type="button" label="Pdf" (click)="downloadPdf()">导出 Pdf</button>
解决方案 captureScreen() {const pdf = new jsPDF('p', 'mm');const promises = $('.pdf-intro').map(function(index, element) {返回新的承诺(功能(解决,拒绝){html2canvas(element, { allowTaint: true, logging: true }).then(功能(画布){解析(canvas.toDataURL('image/jpeg', 1.0));}).catch(函数(错误){拒绝('PDF 页面错误:' + index);});});});Promise.all(promises).then(function(dataURLS) {控制台日志(数据URLS);for (const ind in dataURLS) {如果(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 install 以下内容
npm install jspdf --savenpm install --save @types/jspdfnpm 安装 html2canvas --savenpm install --save @types/html2canvas
在脚本标签内的 angular.json 文件中添加以下内容
"node_modules/jspdf/dist/jspdf.min.js"
在 component.html 中添加如下代码,例如:
<input type="button" value="CPTURE" (click)="captureScreen()"/><div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div><div class="pdf-intro">HTHML 内容</div>
使用此代码添加 css,您通常会在 component.css 中添加它,它将被呈现.
希望这能解决您的问题.
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.
DEMO
.ts file
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 file
<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');
});
}
With this, we have to import jsPDF and html2Canvas to the code
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
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
With this add the following in the angular.json file inside the scripts tag
"node_modules/jspdf/dist/jspdf.min.js"
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>
with this code add css how you would normally add in component.css , it would be rendered.
Hope, this solves your problem.
这篇关于以角度 6 从 html 导出 Pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论