Загрузить в формате PDF из данных ответа JSON в формате Angular 4/5

Question

Последний код ::: 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');
}

Выше приведен URL-адрес API, который возвращает массив объекта и вПросмотр Я печатаю эти данные.Теперь, как загрузить этот список в формате pdf.

Данные json, возвращаемые из вызова API, будут выглядеть примерно так.Как реализовать загрузку в формате PDF для этих данных json.

Хорошо, вот код, который я пробовал.

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

Но это не работает.Здесь return this.http имеет вызов get, но у моего API есть метод post.Я не уверен, какую именно логику попробовать.

Answer 1

Вы можете использовать jspdf и jspdf-autotable для загрузки в формате pdf. Вот пример: Но вам нужно изменить код в соответствии с вашими требованиями. Вам нужно назначить свой массив JSON в rowCountModNew. Надеюсь, это поможет тебе

В HTML:

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

В файле TS:

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

И используйте следующую функцию:

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

Рассматривая массив объектов в качестве ответа, модифицированный код будет:

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

И PDF будет выглядеть так: