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>
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>
- <script src="cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.1.0/…> – foobar Commented Nov 6, 2016 at 11:54
- <script src="cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/…> – foobar Commented Nov 6, 2016 at 11:55
4 Answers
Reset to default 11The 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
});
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')
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
}
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>