How to print two Different Tables using jspdf-autotable
10,457
Solution 1
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
});
Solution 2
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')
Solution 3
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
}
![ghost_programmer](https://i.stack.imgur.com/y2yoC.jpg?s=256&g=1)
Author by
ghost_programmer
Updated on June 22, 2022Comments
-
ghost_programmer about 2 years
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>
-
ghost_programmer over 7 yearsThanks a lot mate...!! You have solved a big problem of mine. I was stuck here for two days.
-
Shakil Hossain about 5 yearswhen table 2 going to be more than one page can i repeat table one for every page ? -Simon Bengtsson
-
Manish Shukla almost 4 yearsYou need to add jspdf-autotable along with jspdf. Example - import jsPDF from "jspdf"; import 'jspdf-autotable';