Welcome folks today in this blog post we will be exporting html5 table to pdf,csv,json & text files using jspdf & tablehtmlexport library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/minty/bootstrap.min.css" /> </head> <body> </body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/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://rawcdn.githack.com/FuriosoJack/TableHTMLExport/v2.0.0/src/tableHTMLExport.js"></script> </html> |
As you can see in the above html5 code we are including the jquery and bootstrap cdn. And also we are including the jspdf cdn and jspdf-autotable cdn library. And also we are including the tableHTMLExport.js cdn library. Now we need to include the html5 body as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="container"> <h1>jQuery TableHTMLExport Plugin Examples</h1> <table class="table" id="example"> <thead class="thead-dark"> <tr> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Subject</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>23</td> <td>Computer Science</td> </tr> <tr> <td>Jacob</td> <td>24</td> <td>Maths</td> </tr> <tr> <td>Larry</td> <td>32</td> <td>Biology</td> </tr> </tbody> </table> <p class="lead"> <button id="json" class="btn btn-primary">TO JSON</button> <button id="csv" class="btn btn-info">TO CSV</button> <button id="pdf" class="btn btn-danger">TO PDF</button> <button id="txt" class="btn btn-success">TO TXT</button> </p> </div> |
As you can see we are having the html5 table in which we have the rows and columns. And then we have different buttons in order to export the html5 table to csv,pdf,json and text files. And now we need to write the javascript code as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $("#json").on("click", function () { $("#example").tableHTMLExport({ type: "json", filename: "sample.json", }); }); $("#csv").on("click", function () { $("#example").tableHTMLExport({ type: "csv", filename: "sample.csv" }); }); $("#pdf").on("click", function () { $("#example").tableHTMLExport({ type: "pdf", filename: "sample.pdf" }); }); $("#txt").on("click", function () { $("#example").tableHTMLExport({ type: "txt", filename: "sample.txt" }); }); </script> |
As you can see we are binding a onclick event listener to all the buttons. And inside it we are calling the tableHTMLExport() constructor we are passing the type parameter to json,csv,pdf & txt and then we are providing the filename attribute which will contain the actual name of the file.
Now if you open the index.html file inside the browser you will see the below result
