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

以上是返回对象数组的api url，在View中我正在打印这些数据。现在如何以pdf格式下载此列表。

从api调用返回的json数据看起来像这样。如何为此json数据实现PDF下载。

好的，这是我试过的代码。

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

但它不起作用。返回this.http这里有一个get调用，但是我的api有一个post方法。我不确定尝试的确切逻辑。

Answer 1

您可以使用jspdf和jspdf-autotable下载为pdf。这是一个例子：但是您需要根据您的要求修改代码。您需要在rowCountModNew中分配JSON数组。希望它能帮助你

在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看起来像

从角度为4/5的JSON后响应数据下载为PDF

1 个答案: