使用 jspdf 将数组导出为表格答案

【问题标题】：export an array as table using jspdf使用 jspdf 将数组导出为表格
【发布时间】：2018-05-04 17:37:37
【问题描述】：

我的数据格式如下。

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

有没有办法将相同的数据作为 2 个不同的表导出到 PDF 文件中？我正在使用 Angular 4 和 jsPDF 包。

表格：1

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

表格：2

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

【问题讨论】：

标签： javascript html angular jspdf

【解决方案1】：

您可以使用 jspdf 和 jspdf-autotable 下载为 pdf。这是相同的示例。可以根据自己的需要修改。希望对你有帮助

在 HTML 中：

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

在 TS 文件中：

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

并使用以下功能：

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

它将如下所示：

【讨论】：

这正是我正在寻找的。你拯救了我的一天@Rak2018
@Rak2018 如果您能为此打开 stackblitz 演示，我们将不胜感激。我正面临问题。对我来说，列标题不显示，也不能显示多个属性
我已经尝试过了，遗憾的是没有为我工作：C 这是过时的吗？如果是的话，有解决办法吗？

【解决方案2】：

让我试着通过一个例子来概括这个问题并简化答案，我将创建一个示例表

The HTML file looks like....
    <div id="render_me">
    <div id="table">
    <table id="StudentInfoListTable">
                    <thead>
                        <tr>    
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td>Dani</td>
                            </tr>               
                    </tbody>
                </table>
      </div>
      <a href="#">Download Test PDF</a>

JS 文件看起来像...

var doc = new jsPDF();

// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
});
//doc.save('Test.pdf');

$('a').click(function(){
  doc.save('TestHTMLDoc.pdf');
});

【讨论】：