I want to print these two tables as pdf using jspdf autotable plugin. But the script that I wrote prints only second table. I think the problem lies in writing script. Will someone guide me how to print these two tables using jspdf-autotable.
<button onclick="generate()">Print</button>
<table id="tbl1" border="2">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Johnson</td>
<td>UK</td>
<td>112</td>
</tr>
<tr>
<td>02</td>
<td>Jim</td>
<td>US</td>
<td>142</td>
</tr>
<tr>
<td>03</td>
<td>Johnson</td>
<td>UK</td>
<td>112</td>
</tr>
<tr>
<td>04</td>
<td>Jim</td>
<td>US</td>
<td>142</td>
</tr>
</tbody>
</table>
<table id="tbl2" border="2">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Julia</td>
<td>Anderson</td>
<td>2312144</td>
<td>Good</td>
</tr>
<tr>
<td>Emma</td>
<td>Watson</td>
<td>24564456</td>
<td>Excellent</td>
</tr>
<tr>
<td>Jim</td>
<td>Carry</td>
<td>5645648</td>
<td>Seperb</td>
</tr>
<tr>
<td>Harry</td>
<td>Potter</td>
<td>544562310</td>
<td>Ridiculous</td>
</tr>
</tbody>
</table>
this is script:
<script>
function generate() {
var doc = new jsPDF('p', 'pt', 'A4');
var res = doc.autoTableHtmlToJson(document.getElementById("tbl1"), true);
doc.autoTable(res.columns, res.data, {margin: {top: 80}});
var res2 = doc.autoTableHtmlToJson(document.getElementById("tbl2"), true);
doc.autoTable(res2.columns, res2.data, {margin: {top: 80}});
doc.save("test.pdf");
}
</script>
The second table is most likely printed on top of the first one. You would have to specify the start position of the second table like so:
var res = doc.autoTableHtmlToJson(document.getElementById('tbl1'));
doc.autoTable(res.columns, res.data);
var res2 = doc.autoTableHtmlToJson(document.getElementById('tbl2'));
doc.autoTable(res2.columns, res2.data, {
startY: doc.lastAutoTable.finalY + 50
});
If you use doc.autoTableHtmlToJson does not consider a head and duplicate one row. That's works for me:
generate(){
const doc = new jsPDF()
doc.autoTable({
theme: 'plain',
headStyles: { fontSize: 10 },
bodyStyles: { fontSize: 8, fontStyle: 'italic' },
head: [['ID', 'Name', 'Country']],
body: [['1', 'Simon', 'Sweden'], ['2', 'Karl', 'Norway']],
});
doc.autoTable({
theme: 'plain',
headStyles: { fontSize: 10 },
bodyStyles: { fontSize: 8, fontStyle: 'italic' },
head: [['ID', 'Name', 'Country']],
body: [['1', 'Simon', 'Swedenddd'], ['2', 'Karl', 'Norway']],
});
// doc.save('table.pdf');
doc.output('dataurlnewwindow'); //to check pdf generate
}
Example with latest jspdf version
var doc = new jsPDF("landscape");
var header = function () {
doc.setFontSize(14);
doc.setTextColor(40);
doc.setFontStyle('bold');
doc.text("Article", 15, 10);
};
doc.autoTable({html:"#table1", didDrawPage: header});
doc.autoTable({html:"#table2", didDrawPage: header});
doc.autoTable({html:"#table3", didDrawPage: header});
doc.autoTable({html:"#table4", didDrawPage: header});
doc.autoTable({html:"#table5", didDrawPage: header});
doc.save('myPDF.pdf')
only add startY to second table
<script>
function generate() {
var doc = new jsPDF('p', 'pt', 'A4');
var res = doc.autoTableHtmlToJson(document.getElementById("tbl1"), true);
doc.autoTable(res.columns, res.data, {margin: {top: 80}});
var res2 = doc.autoTableHtmlToJson(document.getElementById("tbl2"), true);
doc.autoTable(res2.columns, res2.data, startY: doc.lastAutoTable.finalY + 20, {margin: {top: 80}});
doc.save("test.pdf");
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.