Skip to content

WebNinjaDeveloper.com

Programming Tutorials




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

jsPDF Tutorial to Convert HTML Div to PDF with Custom CSS Using fromHTML() Method Full Example For Beginners

Posted on November 23, 2022

 

 

 

Welcome folks today in this blog post we will be converting html div & table to pdf with custom css without using jspdf-autotable library using fromHTML() method in browser using jspdf library in 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 include the cdn libraries of the jspdf library which will convert the html to pdf with css

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COVID-19 API in Javascript</title>
</head>
<style>
  
</style>
<body>
    
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
</html>

 

 

And now we need to declare the simple div which will contain the h1  heading and a simple html5 table which we need to export to pdf document as shown below

 

 

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
<div id="content">
        <h1>This is the heading</h1>
        <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>Kane</td>
                    <td>25</td>
                    <td>New Zealand</td>
                </tr>
                <tr>
                    <td>Harry</td>
                    <td>25</td>
                    <td>England</td>
                </tr>
                <tr>
                    <td>Jim</td>
                    <td>25</td>
                    <td>Canada</td>
                </tr>
            </tbody>
        </table>
    </div>

 

 

And now we need to apply some custom css to this h1 element as shown below

 

 

CSS
1
2
3
h1{
        color:green
    }

 

 

And now if you see the heading it will have the background color of green and text color will be yellow. Now we need to preserve these css properties and export this to pdf document

 

 

 

 

And now we need to write the javascript code to export this to pdf using the jspdf library as shown below

 

 

JavaScript
1
2
3
4
let doc = new jsPDF()
let h1 = document.querySelector('#content')
doc.fromHTML(h1,15,15)
doc.save("output.pdf")

 

 

As you can see we are declaring the new document using the jspdf constructor and then we are using the fromHTML() method to convert the html to pdf and in the argument we are passing the x and y coordinates and then we are saving the pdf with a custom name of output.pdf as shown above.

 

Now if you open the index.html file inside the browser you will see the below pdf document created

 

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • 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