angular 6でHTMLからPDFをエクスポート
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>
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
これで、scriptsタグ内の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>このコードでcssを追加すると、通常はcomponent.cssに追加する方法でレンダリングされます。
これで問題が解決することを願っています。
jsPDFおよびdom to imageパッケージを使用して、id='dashboard'でHTML divをエクスポートできます。
パッケージをインストールする
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>
[ https://www.c-sharpcorner.com/article/convert-html-to-pdf-using-angular-6/] [1 npm 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
);
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');
});
}
このように使用する stackblitzの例 デモでは、このように使用します
import {jsPDF} from 'jspdf';
public downloadPDF() {
const doc = new jsPDF();
.....
}