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