jsPDF-Autotable Example to Convert Multiple HTML5 Tables to PDF Document With CSS in Javascript Full Project For Beginners

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Acroform Text Field in PDF Document</title>
</head>
<body>
    <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>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
     function generate(){
         var doc = new jsPDF()
        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
});
doc.save("output.pdf")
     }
</script>
</html>

 

 

 

Leave a Reply