[英]export an array as table using jspdf
I have my data in below format. 我的数据格式如下。
[
{"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234},
{"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
{"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
]
Is there a way to export the same data as 2 different tables into a PDF file ? 有没有一种方法可以将2个不同表中的相同数据导出到PDF文件中? I am using Angular 4 and jsPDF package.
我正在使用Angular 4和jsPDF包。
Table: 1 表格1
**Company** **FName**
XYZ1 John
XYZ2 Jack
XYZ3 James
Table: 2 表:2
**LName** **ID**
Deere 1234
Jones 2345
Lebron 3456
You can use jspdf and jspdf-autotable to download as pdf. 您可以使用jspdf和jspdf-autotable以pdf格式下载。 Here is the example for the same.
这是相同的示例。 You can modify according to your needs.. Hope it will help u
您可以根据自己的需要进行修改。希望对您有所帮助
In HTML: 在HTML中:
<a (click)="convert()">Generate PDF</a>
In TS file: 在TS文件中:
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
And use the below function : 并使用以下功能:
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');
}
And it will look like as below: 它将如下所示:
Let me try to generalize the question and simplify the answer by taking an example, I will create a sample table 让我尝试通过举例来概括问题并简化答案,我将创建一个示例表
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>
The JS file looks like... 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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.