Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/475.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用jspdf将数组导出为表_Javascript_Html_Angular_Jspdf - Fatal编程技术网

Javascript 使用jspdf将数组导出为表

Javascript 使用jspdf将数组导出为表,javascript,html,angular,jspdf,Javascript,Html,Angular,Jspdf,我的数据格式如下 [ {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234}, {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345}, {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456} ] 是否有方法将相同的数据作为两个不同的表导出到PD

我的数据格式如下

[
    {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234}, 
    {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
    {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
]
是否有方法将相同的数据作为两个不同的表导出到PDF文件中?我使用的是Angular 4和jsPDF包

表:1

**Company**    **FName**
  XYZ1            John
  XYZ2            Jack
  XYZ3            James
表格:2

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

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

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>

您可以使用jspdf和jspdf自动表以pdf格式下载。下面是同样的例子。您可以根据需要进行修改。。希望它能帮助你

在HTML中:

<a (click)="convert()">Generate PDF</a>
并使用以下功能:

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演示,将不胜感激。我面临着这个问题。对于我来说,列标题未显示且无法显示多个属性
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');
      }