How To Generate PDF From Data / Create PDF in Angular 6

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

npm install jspdf --save

for Reference You Can User Following Links

(https://github.com/MrRio/jsPDF)

2) .Now You Need To Install Second Package 

npm install jspdf jspdf-autotable --save

for Reference 

(https://github.com/simonbengtsson/jsPDF-AutoTable)

(https://www.npmjs.com/package/jspdf-autotable/v/2.0.9)

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