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

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

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

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

<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>

<thead>

<tr>

<th>Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>New Zealand</td>

</tr>

<tr>

<td>Smith</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

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

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

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

   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
        )
    }

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

Get Started

Leave a Reply Cancel reply