How To Generate PDF From Data / Create PDF in Angular 6
Firstly You Need To Install Two Package
1). jsPDF
2).AutoTable
1). For Package of jsPDF You Can Run Following Command
for Reference You Can User Following Links
2) .Now You Need To Install Second Package
npm install jspdf jspdf-autotable --save
for Reference
After Installing following Link then You Should Create Service where you can write actual logic
For Creating PDF
Now I Am Creating AComponent & Service For auto Table ,Before Start We Have Demo Data for That service where we can use it
1). This Part Is Write Where A Service Will consume (Use)
Means A Call Component Of Service
1) .Complate Method :-(Compnent.ts)
import { Component, OnInit } from '@angular/core';
import { ExcelService } from '../../../src/app/services/excel.service';
@Component({
selector: 'app-grid-data',
templateUrl: './grid-data.component.html',
styleUrls: ['./grid-data.component.css']
})
export class GridDataComponent implements OnInit {
data = {};
dataitems: any = {};
constructor(private excelService: ExcelService) { }
ngOnInit() {
this.dataitems.data = [
[10, 'Demo Text1', 1, 'Finland', 7.632, 'Helsinki'],
[20, 'Demo Text2', 2, 'Norway', 7.594, 'Oslo'],
[30, 'Demo Text3', 3, 'Denmark', 7.555, 'Copenhagen'],
[40, 'Demo Text4', 4, 'Iceland', 7.495, 'Reykjavík'],
[50, 'Demo Text5', 5, 'Switzerland', 7.487, 'Bern'],
[60, 'Demo Text6', 9, 'Sweden', 7.314, 'Stockholm'],
[70, 'Demo Text7', 73, 'Belarus', 5.483, 'Minsk']
];
this.dataitems.text = 'Hellow Demo Test PDF';
}
generateExcel() {
this.excelService.generateExcel(this.data, 'DemoExcel');
}
generatePDF() {
this.excelService.generatePDF(this.dataitems, 'DemoPDF');
}
}
2). Now You Need To Create Service File
import { Injectable } from '@angular/core';
import * as jspdf from 'jspdf';
import 'jspdf-autotable';
@Injectable({
providedIn: 'root'
})
export class ExcelService {
workbook: ExcelJS.Workbook;
worksheet: any;
constructor() { }
generatePDF(data, FileName) {
const header = [
[
{
content: 'Text', colSpan: 2, styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
{
content: 'ID', rowSpan: 2, styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
{
content: 'Country', rowSpan: 2, styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
{
content: 'Rank', rowSpan: 2, styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
{
content: 'Capital', rowSpan: 2, styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
],
[{
content: 'Text ID', styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
},
{
content: 'Text Name', styles: {
fontSize: 8,
lineWidth: 0.25,
overflow: 'linebreak',
halign: 'center'
}
}]
];
const pdf = new jspdf(); // 'landscape'
const xOffset = (pdf.internal.pageSize.width / 2) - (pdf.getStringUnitWidth(data.text) * pdf.internal.getFontSize() / 2);
const yOffset = (pdf.internal.pageSize.height / 2) - (pdf.getStringUnitWidth(data.text) * pdf.internal.getFontSize() / 2);
let LastY = 0;
pdf.setFont('helvetica');
/*
{
"courier": ["normal", "bold", "italic", "bolditalic"],
"Courier": ["", "Bold", "Oblique", "BoldOblique"],
"times": ["normal", "bold", "italic", "bolditalic"],
"Times": ["Roman", "Bold", "Italic", "BoldItalic"],
"helvetica": ["normal", "bold", "italic", "bolditalic"],
"Helvetica": ["", "Bold", "", ""]
}
*/
pdf.setFontType('bolditalic');
pdf.setFontSize(20);
pdf.text(data.text, yOffset, xOffset);
for (let i = 0; i <= 20; i++) {
pdf.autoTable({
theme: 'grid',
head: header,
body: data.data,
styles: {
lineWidth: 0,
},
margin: { top: i === 0 ? 31 : 10 },
columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green
didDrawCell: data.data
});
}
for (let i = 0; i <= 20; i++) {
pdf.autoTable({
theme: 'grid',
head: header,
body: data.data,
styles: {
lineWidth: 0,
},
margin: { top: 10 },
columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green
didDrawCell: data.data
});
}
pdf.autoTable({
theme: 'grid',
head: header,
body: data.data,
margin: { top: 10 },
styles: {
lineWidth: 0,
},
columnStyles: { 0: { halign: 'center', fillColor: [0, 255, 0] } }, // Cells in first column centered and green
didDrawCell: data.data
});
pdf.save(FileName + '.pdf');
}
}
Here
" import * as jspdf from 'jspdf';
import 'jspdf-autotable'; "
Both Are Declare Part Of API