У меня есть данные в формате ниже.
[
{"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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Позвольте мне попытаться обобщить вопрос и упростить ответ на примере. Я создам образец таблицы
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');
});
Вы можете использовать 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, я был бы очень признателен, если бы вы могли открыть для этого демонстрацию stackblitz. Я столкнулся с проблемой. для меня заголовки столбцов не отображаются и не могут отображать несколько свойств
Это именно то, что я ищу. Ты спас мне день @ Rak2018