Download as PDF from a JSON post response data in angular 4/5

Question

Latest code::: convert() {

  const doc = new jsPDF();
  // tslint:disable-next-line:max-line-length
  const col = ['DischargeDate', 'Case Number', 'Patient Name', 'Hospital Name',  'Payor', 'Total Doctor Fee', 'To be Collected'];
  const rows = [];

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

const itemNew = this.finalArList;

itemNew.forEach(element => {
  // tslint:disable-next-line:max-line-length
  const temp = [element.dischargeDate, element.caseNo, element.patientName, element.instName, element.payor, element.totalDrFee, element.drFeeToCollect];
  rows.push(temp);

});

  doc.autoTable(col, rows);
  doc.save('Test.pdf');
}

The above is the api url that returns an array of object and in View I am printing those data. Now how to download this list as a pdf format.

json data returned from api call would look something like this. How do I implement download as PDF for this json data.

Okay here is the code I have tried.

public downloadPdf() {
      return this.http
        .get('http://161.202.31.51:8185/sgdocsrv/ar/getARList', {
          responseType: ResponseContentType.Blob
        })
        .map(res => {
          return {
            filename: 'filename.pdf',
            data: res.blob()
          };
        })
        .subscribe(res => {
            console.log('start download:', res);
            const url = window.URL.createObjectURL(res.data);
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display: none');
            a.href = url;
            a.download = res.filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove(); // remove the element
          }, error => {
            console.log('download error:', JSON.stringify(error));
          }, () => {
            console.log('Completed file download.')
          });
    }

But it doesnt work . Here the return this.http has a get call, but my api has a post method. I am not sure whats the exact logic to try.

Solution

You can use jspdf and jspdf-autotable to download as pdf. Here is the example: But you need to modify the code as per your requirement. You need to assign your JSON array in rowCountModNew. 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 = ["Id", "TypeID","Accnt","Amnt","Start","End","Contrapartida"];
    var rows = [];

var rowCountModNew = [
["1721079361", "0001", "2100074911", "200", "22112017", "23112017", "51696"],
["1721079362", "0002", "2100074912", "300", "22112017", "23112017", "51691"],
["1721079363", "0003", "2100074913", "400", "22112017", "23112017", "51692"],
["1721079364", "0004", "2100074914", "500", "22112017", "23112017", "51693"]
]


rowCountModNew.forEach(element => {
      rows.push(element);

    });


    doc.autoTable(col, rows);
    doc.save('Test.pdf');
  }

Considering an array of object as response the modified code will be:

    convert() {

        var doc = new jsPDF();
        var col = ["Details", "Values"];
        var rows = [];

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

     var itemNew = [    
      { id: 'Case Number', name : '101111111' },
      { id: 'Patient Name', name : 'UAT DR' },
      { id: 'Hospital Name', name: 'Dr Abcd' }    
    ]


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

    });        

        doc.autoTable(col, rows);
        doc.save('Test.pdf');
      }

And the pdf will look like this

Comments

[Nancy]

Thanks for the response. Your solution works great !. Here you have hardcoded row and column data . But my question is to retrieve the data from api Request url :(161.202.31.51:8185/sgdocsrv/ar/getARList) and response will be an array of objects. How do I achieve this?

[Rak2018]

Ok..So I believe you are getting response from the URL above as an array of objects ..Can you put a sample response here, so that it will be easy to answer.

[Rak2018]

However I updated the code with a sample array objects. The key name may be different in your case which you can modify. Hope it will help u

[Nancy]

Any idea about this question ? html2canvas plugin stackoverflow.com/questions/50018124/…

[Nancy]

I have implemented this method. I am getting the list of data in my PDF . But in my case, the number of columns are more . So the row elements form a ellipsis and doesnt display completely . Please help !! I have attached the screen shot for reference. Any way can we see the data with out being hidden?

[Nancy]

Rak2018 any suggestions for the above comment?

[Rak2018]

You can use styles: { overflow: 'linebreak', // fontSize: 50, // rowHeight: 60, columnWidth: 'wrap' }, pageBreak: 'auto' to solve your problem...if your table coloumn no is too long, then it will be better to divide it into two table and print to pdf

[Nancy]

Could you pls provide an example of two table structure

[Rak2018]

You can refer this post..stackoverflow.com/questions/50180380/…

[Nancy]

Do you have a solution for this link stackoverflow.com/questions/50484000/…