Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Sitemap
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

  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • How to Download Files From URL in Node.js Using Node-Downloader-Helper Library
  • Angular 10 Image Carousel and Video Gallery Lightbox Modal Slider Using ng-image-slider Library
  • React Unsplash Api Photo Search App
  • React Form Validation Using Formik and Yup
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • javascript
  • Koajs
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme