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');

  }