angular - 从 4/5 Angular JSON 后响应数据下载为 PDF

Question

最新代码:::
转变() {

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