jsPDF & jsPDF-Autotable Simple Example to Add Text & Tables in PDF Document Using Javascript

Welcome folks today in this blog post we will be adding dynamic text and tables inside pdf document using jspdf & jspdf-autotable library in browser using 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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://parall.ax/parallax/js/jspdf.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

As you can see you need to include the jspdf and jspdf-autotable library cdn.

Adding Dynamic Text in PDF Document

Now guys we will be having a simple input field where we will allow the user to input the dynamic text and then we will have the button to generate the pdf document as shown below

<h1>jsPDF Simple Example to Convert Text to PDF</h1>
    <form id="form">
        <input type="text" name="" id="text" placeholder="Enter your text" required>
        <button>Generate PDF</button>
    </form>

<h1>jsPDF Simple Example to Convert Text to PDF</h1>

<button>Generate PDF</button>

</form>

Now we need to write the javascript code for this purpose. We will be first of all attaching the form event listener using their id. And then we need to add the text inside the pdf document using the text() method in jspdf.

let form = document.getElementById('form')

    form.addEventListener('submit',(e) => {
        e.preventDefault()

        let text = document.getElementById('text').value

        let doc = new jsPDF()

        doc.text(text,10,10)

        doc.save("output.pdf")
    })

let form = document.getElementById('form')

form.addEventListener('submit',(e) => {

e.preventDefault()

let text = document.getElementById('text').value

let doc = new jsPDF()

doc.text(text,10,10)

doc.save("output.pdf")

})

Now if you open the index.html file inside the browser you will see the below result

Adding the Table in PDF Document

Now we need to add the table html code and we will be also have a button to generate the pdf document

<table id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gautam</td>
                <td>25</td>
                <td>India</td>
            </tr>
            <tr>
                <td>John</td>
                <td>28</td>
                <td>New Zealand</td>
            </tr>
            <tr>
                <td>Jim</td>
                <td>29</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>David</td>
                <td>20</td>
                <td>England</td>
            </tr>
            <tr>
                <td>Lesnar</td>
                <td>45</td>
                <td>Iceland</td>
            </tr>
            <tr>
                <td>Latham</td>
                <td>35</td>
                <td>Russia</td>
            </tr>
        </tbody>
    </table>

    <button onclick="tableToPdf()">Convert Table to PDF</button>

<thead>

<tr>

<th>Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>Gautam</td>

<td>India</td>

</tr>

<tr>

<td>New Zealand</td>

</tr>

<tr>

</tr>

<tr>

<td>David</td>

<td>England</td>

</tr>

<tr>

<td>Lesnar</td>

<td>Iceland</td>

</tr>

<tr>

<td>Latham</td>

<td>Russia</td>

</tr>

</tbody>

</table>

<button onclick="tableToPdf()">Convert Table to PDF</button>

Now we need to write the method which we have binded on the button. Now we need to write the javascript code which basically uses the plugin of jspdf which is jspdf-autotable to convert the html5 table to pdf document

function tableToPdf(){
        let doc = new jsPDF()

        doc.autoTable({
            html:"#table"
        })

        doc.save("table.pdf")
    }

function tableToPdf(){

let doc = new jsPDF()

doc.autoTable({

html:"#table"

})

doc.save("table.pdf")

}

Basically in the above code you can see that we are using the autoTable() method where we are providing the html property to the html5 table