Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

jsPDF Tutorial to Export HTML Table to PDF Document Without jspdf-autotable Library Using fromHTML

Posted on October 30, 2022

Welcome folks today in this blog post we will be exporting html table to pdf document without using jspdf-autotable library using the fromhtml method. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to copy paste the jspdf cdn library using the below code

 

 

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>

 

 

And now we need to copy paste the html5 table here we have three columns which is name,age and country. And now copy paste the below code

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>25</td>
            <td>New Zealand</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>29</td>
            <td>Australia</td>
        </tr>
    </tbody>
</table>

 

 

As you can see we have attached the id parameter to the html5 table so that we can target in jspdf using javascript.

 

 

And now we will be having the button to generate the pdf document

 

 

1
<button onclick="generatePDF()">Generate PDF</button>

 

 

Now we will be writing the generatePDF() function so we need to copy paste the below code

 

 

JavaScript
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
   function generatePDF(){
        let specialElementHandlers = {
            'no-export':function(element,renderer){
                return true
            }
        }
 
        let doc = new jsPDF()
 
        let source = document.getElementById('table').innerHTML
 
        let margins = {
            top:10,
            bottom:10,
            left:10,
            width:595
        }
 
        doc.fromHTML(
            source,
            margins.left,
            margins.top,
            {
                "width":margins.width,
                "elementHandlers":specialElementHandlers
            },
            function(dispose){
                doc.save("output.pdf")
            },margins
        )
    }

 

 

As you can see in the above code we are initializing the specialElementHandlers object in which we have defined the margins and the positioning of the elements. And then we are using the fromHTML() method to convert the input html5 table having the id called table and then we are attaching the margin from the left and the top and then we are attaching the elementHandlers property. And then we have the callback function and inside that we will be downloading the pdf document with the custom filename. Now if you open the app inside the browser you will see the below screenshot

 

 

 

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme