export an array as table using jspdf

Question

I have my data in below format.

[
    {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234}, 
    {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
    {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
]

Is there a way to export the same data as 2 different tables into a PDF file ? I am using Angular 4 and jsPDF package.

Table: 1

**Company**    **FName**
  XYZ1            John
  XYZ2            Jack
  XYZ3            James

Table: 2

**LName**    **ID**
  Deere        1234
  Jones        2345
  Lebron       3456

Solution

You can use jspdf and jspdf-autotable to download as pdf. Here is the example for the same. You can modify according to your needs.. Hope it will help u

In HTML:

<a (click)="convert()">Generate PDF</a>

In TS file:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

And use the below function :

convert() {

       var doc = new jsPDF();
       var col = ["Sr. No.","Details"];
       var col1 = ["Details", "Values"];
       var rows = [];
       var rows1 = [];

  /* The following array of object as response from the API req  */



var itemNew = [

  { index:'1',id: 'Case Number', name : '101111111' },
  { index:'2',id: 'Patient Name', name : 'UAT DR' },
  { index:'3',id: 'Hospital Name', name: 'Dr Abcd' }

]


   itemNew.forEach(element => {      
        var temp = [element.index,element.id];
        var temp1 = [element.id,element.name];
        rows.push(temp);
        rows1.push(temp1);

    });        

        doc.autoTable(col, rows, { startY: 10 });

        doc.autoTable(col1, rows1, { startY: 60 });
        doc.save('Test.pdf');
      }

And it will look like as below:

Comments

[killer]

This is exactly what I'm looking for. You saved my day @Rak2018

[Mr. Learner]

@Rak2018 it would be much appreciated if you could open stackblitz demo for this. I'm facing issue. for me column headers is not displaying and not able show multiple properties

[ReactPotato]

I have try this and sadly didn't work for me :C is this out dated? if so is there a work around ?