typescript 以角度 6 从 html 导出 Pdf
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53388758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Export Pdf from html in angular 6
提问by realist
I want to export pdf from html in angular 6. So, I'm using jspdflibrary. 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.
我想从 html 中以 angular 6 导出 pdf。所以，我正在使用jspdf库。但我不能给出像颜色和背景颜色这样的样式。我怎样才能做到这一点？（如果有来自 的任何其他免费库jspdf，我可以使用它）您可以从下面的链接中查看演示。
.ts file
.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 file
.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>
回答by poo1177
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
有了这个，我们必须将 jsPDF 和 html2Canvas 导入到代码中
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
for this, you have to do npm install the following
为此，您必须执行 npm install 以下操作
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
在脚本标签内的 angular.json 文件中添加以下内容
"node_modules/jspdf/dist/jspdf.min.js"
Inside the component.html add code like this for example:
在 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>with this code add css how you would normally add in component.css , it would be rendered.
使用此代码添加 css，您通常会在 component.css 中添加它，它将被呈现。
Hope, this solves your problem.
希望，这可以解决您的问题。
回答by Hien Nguyen
You can use jsPDFand dom to imagepackage to export HTML div with id='dashboard'.
您可以使用jsPDF和dom to image打包导出 HTML div id='dashboard'。
Install package
安装包
import * as domtoimage from 'dom-to-image';
import * as FileSaver from 'file-saver';
import * as jsPDF from 'jspdf';
TS file
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
HTML
<gridster id='dashboard'></gridster>
回答by Muhammad Danish
[https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/][1npm install jspdf
And to install html2canvas package, use given npm command. npm install html2canvas
When we are done with the installation part, it's time to import it into our component using the import statement.
[ https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/][1npm install 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
);
回答by dasunse
Use this way stackblitz exampleIn you demo use in this way
使用这种方式stackblitz 示例在你的演示中使用这种方式
import {jsPDF} from 'jspdf';
public downloadPDF() {
const doc = new jsPDF();
.....
}
回答by vijay
html2canvas will resolve your issue. Update your code like below.
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');
});
}
}
