Export TABLE to PDF in Angular

We will be using jsPdf to export the Data.

Step 1:

• npm install
•  jspdf jspdf-autotable
• npm install --save @types/jspdf

Step 2 : 

Add Scripts in Angular.json

"scripts": ["./node_modules/jspdf/dist/jspdf.min.js",

            "./node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"]

Step 3 :

Check Package.json

dependencies:{

    
"jspdf": "^2.3.1",

        "jspdf-autotable": "^3.5.14",

}

devDependencies:{

    "@types/jspdf": "^1.3.3",

}

Step 4: Actual Coding Starts:-

import the packages

import 'jspdf-autotable';

import { jsPDF } from 'jspdf';  

Write Method to export the table Data

In auto-table we need 2 things Column and row Data

dipslayColumn will be Array of element with all the column names

Eg :  displayedColumns: string[] =

 [

    'patientId',

    'patientName',

    'dob',

    'gender',

    'screeningDate',

    'assignedClinician',

    'study',

    'studyVisit',

    'visitDate',

    'imagePath',

    'visitStatus',

    'review'];

Now Row Data(Array) should be array of Array

Eg: ["E1001","Sashi Yadav","30-07-1998","Male","12-03-2020","Dr. Rajesh",.....]

exportPdf() {

    var doc = new jsPDF("l", "px");

    doc.setFontSize(18);

    doc.text('My PDF Table', 11, 8);

    doc.setFontSize(11);

    doc.setTextColor(100); (doc as any).autoTable(this.displayedColumns, this.array)

    // Open PDF document in new tab

    doc.output('dataurlnewwindow')

    // Download PDF document  

    doc.save('table.pdf');

  } 

               

How to pass data between two components in angular

 Hello Guys, today in this blog we will learn how to pass data between components.

Suppose there is a component Customer Registration and Dashboard. We need to pass data from Customers to the Dashboard. We will have to create a service so that it will also the data sharing.

Ceate customer.service.ts

import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()

export class CustomerRegistartionService {

    public RenewCount = new BehaviorSubject<number>(0);

    getRenewCount(): Observable<number> {

        return this.RenewCount.asObservable();

    }

    setRenewCount(val: number) {

        this.RenewCount.next(val);

    }

    public Customer = new BehaviorSubject<any>([]);

    getCustomer():Observable<any>{

        return this.Customer.asObservable();

    }

    setCustomer(val:any){

        this.Customer.next(val);

    }

    public Revenue = new BehaviorSubject<any>([]);

    getRevenue():Observable<any>{

        return this.Revenue.asObservable();

    }

    setRevenue(val : any){

        this.Revenue.next(val)

    }

} 

Here we need to get and set the value which we need to pass

we use set from the source component and use get in the destination component.

THIS IS OUR SOURCE COMPONENT

GetCustomerList() {

        this.loading = true;

        this.http.get('api/CustomerRegistration/GetCustomerList')

            .subscribe(res => {

                this.CustomerList = res;

                this.findSum(this.CustomerList)

                this.custservice.setRenewCount(this.CustomerList.filter(a => a.Remaining <= 6).length);

                this.custservice.setCustomer(this.CustomerList);

                this.loading = false;

            }, err => {

                this.messageService.add({ severity: 'error', summary: 'Error Message', detail: err.error });

                this.loading = false;

            })

    }

THIS IS OUR DESTINATION

ngOnInit(){

        this.custservice.getRenewCount()

        .subscribe(val =>{

            this.count = val;

        })

        this.custservice.getCustomer()

        .subscribe(val=>{

            this.loading=true;

            this.customer= val;

            console.log(this.customer)

            this.loading=false;

        })