Post
Ask Question

Export An HTML Table To PDF Using jsPDF - Autotable

Introduction 

 
You must have often downloaded PDF files from the internet during your school/college days or for some other reasons. It might be an exam form, fee receipt, invoice or any such document. Have you ever thought about how these contents get downloaded in the form of PDF in just one-click? Today, we are going to perform the same thing in this article. There will just be a slight change. Here, we will learn how to export tables in the form of PDF.
 
In this article, we will learn about jsPDF - AutoTable and export a simple HTML table to PDF using jsPDF - AutoTable.
 
Before starting to work with it, lets first understand what is jsPDF and jsPDF - AutoTable?
 
jsPDF is a library used to export HTML web pages into PDF file. From a single letter to an image, you can export your HTML contents into a PDF file.
 
Also, you can modify your content according to the format you would like to have in your PDF using jsPDF. 
 
For more information and examples on jsPDF, you can refer to these links:
  • https://github.com/MrRio/jsPDF 
  • https://www.npmjs.com/package/jspdf
  • https://micropyramid.com/blog/export-html-web-page-to-pdf-using-jspdf/
jsPDF - AutoTable is a plugin which helps us to export HTML tables to PDF. You can export your HTML tables easily by just adding this plugin to your project.
Also, it contains 3 themes:
  • striped
  • grid
  • plain
We will export the table in all the 3 themes in our sample project.
 
For more information on jsPDF - AutoTable, please refer the following links:
  • https://www.npmjs.com/package/jspdf-autotable
  • https://github.com/simonbengtsson/jsPDF-AutoTable
Pre-requisites
  • Windows OS/ Mac OS
  • Visual Studio/ Visual Studio For Mac. 
So let's start.
 
Open Visual Studio and create an ASP.NET project. You can create ASP.NET Web Forms or ASP.NET MVC project. Here, I used ASP.NET MVC.
 
 
OR 
 
  • Open Index.cshtml present in Views -> Home folder. 
  • If you have created an ASP.NET Web Forms project, open the Default.aspx file.
  • Here, we will design our HTML table. I have created a simple table that contains a list of students with their marks. Copy and Paste the following code. If you wish to design your own HTML table, you can do that as well.
    1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>  
    2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>  
    3. <style>  
    4. th, td {  
    5.     text - align: center;  
    6.     border: 1 px solid black;  
    7.     border - collapse: collapse;  
    8. }  
    9. </style>  
    10. <center>  
    11.     <h2>TOTAL MARKS OF STUDENTS</h2>  
    12.     <br />  
    13.     <table id="simple_table">  
    14.         <tr>  
    15.             <th>Roll No.</th>  
    16.             <th>Name</th>  
    17.             <th>Marks</th>  
    18.         </tr>  
    19.         <tr>  
    20.             <td>1</td>  
    21.             <td>Anna</td>  
    22.             <td>85</td>  
    23.         </tr>  
    24.         <tr>  
    25.             <td>2</td>  
    26.             <td>Bhavesh</td>  
    27.             <td>72</td>  
    28.         </tr>  
    29.         <tr>  
    30.             <td>3</td>  
    31.             <td>Sandhya</td>  
    32.             <td>63</td>  
    33.         </tr>  
    34.         <tr>  
    35.             <td>4</td>  
    36.             <td>Rohan</td>  
    37.             <td>90</td>  
    38.         </tr>  
    39.         <tr>  
    40.             <td>5</td>  
    41.             <td>Leena</td>  
    42.             <td>82</td>  
    43.         </tr>  
    44.         <tr>  
    45.             <td>6</td>  
    46.             <td>Nayan</td>  
    47.             <td>56</td>  
    48.         </tr>  
    49.     </table>  
    50.     <br />  
    51.     <input type="button" onclick="generate()" value="Export To PDF" />  
    52. </center>  
    53. <script type="text/javascript">  
    54. function generate() {  
    55.     var doc = new jsPDF('p', 'pt', 'letter');  
    56.     var htmlstring = '';  
    57.     var tempVarToCheckPageHeight = 0;  
    58.     var pageHeight = 0;  
    59.     pageHeight = doc.internal.pageSize.height;  
    60.     specialElementHandlers = {  
    61.         // element with id of "bypass" - jQuery style selector  
    62.         '#bypassme': function(element, renderer) {  
    63.             // true = "handled elsewhere, bypass text extraction"  
    64.             return true  
    65.         }  
    66.     };  
    67.     margins = {  
    68.         top: 150,  
    69.         bottom: 60,  
    70.         left: 40,  
    71.         right: 40,  
    72.         width: 600  
    73.     };  
    74.     var y = 20;  
    75.     doc.setLineWidth(2);  
    76.     doc.text(200, y = y + 30, "TOTAL MARKS OF STUDENTS");  
    77.     doc.autoTable({  
    78.         html: '#simple_table',  
    79.         startY: 70,  
    80.         theme: 'grid',  
    81.         columnStyles: {  
    82.             0: {  
    83.                 cellWidth: 180,  
    84.             },  
    85.             1: {  
    86.                 cellWidth: 180,  
    87.             },  
    88.             2: {  
    89.                 cellWidth: 180,  
    90.             }  
    91.         },  
    92.         styles: {  
    93.             minCellHeight: 40  
    94.         }  
    95.     })  
    96.     doc.save('Marks_Of_Students.pdf');  
    97. }  
    98. </script>  
Note
In the above code, I have directly used the plugin links in the <script> tag. If you have downloaded the plugin and have imported the files in your project then assign their paths in the src attribute of <script> tag. Also, you can run the plugin links on your browser and save the entire scripts by creating new javascript files in your project with the extension .min.js. But make sure you assign the path of those files in the src attribute of <script> tag.
  • In the above code, you can see we have assigned an id i.e simple_table to the <table> tag and we have used the same id in the doc.autotable(). 
  • jsPDF - autotable searches for the id and exports the table which has the specific id.
  • We are done! We do not need to code anything in any other files other than the Index.cshtml file in MVC project / Default.aspx file in case of Web Forms.
  • Lets, run the project and check if it works.
  • Click on the Export button. A pdf file will be downloaded. Open the downloaded file and you will get the output in a similar manner.
  • In the above code, we had assigned the theme as 'grid'. Change the theme to 'striped' and 'plain' and re-run the project.
  • If you have assigned the theme as 'striped', you must get the following output.
  • If you have assigned the theme as 'plain', you must get the following output.
Hence, we learned to export an HTML table to PDF using jsPDF - autotable plugin.
 
I hope you like this article. If you have any ideas/suggestions or if you can suggest any improvements in this article then please do share.
 
Happy coding! 


Similar Articles