Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on December 16, 2022

 

 

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

 

 

1
2
3
    <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

 

 

1
2
3
4
5
<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>

 

 

 

 

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.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
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

 

 

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
36
37
38
39
40
41
42
43
<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>

 

 

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
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

 

Recent Posts

  • Angular 14/15 JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • Build a JWT Login & Registration Auth System in Node.js & Express Using MongoDB in Browser
  • React-Admin Example to Create CRUD REST API Using JSON-Server Library in Browser Using Javascript
  • Javascript Papaparse Example to Parse CSV Files and Export to JSON File and Download it as Attachment
  • Javascript Select2.js Example to Display Single & Multi-Select Dropdown & Fetch Remote Data Using Ajax in Dropdown
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme