Skip to content

WebNinjaDeveloper.com

Programming Tutorials




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

jsPDF-Autotable Tutorial To Add Colorful Border to Header Cells in Table in PDF Doc in Javascript

Posted on December 17, 2022

 

 

Welcome folks today in this blog post we will be adding colorful borders to each header cells in table in pdf document using jspdf-autotable 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 jspdf and jspdf-autotable library cdn and also we will have a simple button to generate the pdf.

 

 

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>jspdf-autotable Change border color of header cells</title>
</head>
<body>
    <button onclick="generatePDF()">Generate PDF</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js"></script>
<script>
    
</script>
</html>

 

 

As you can see we are added a method which is called generatePDF() which will execute once the user clicks the button. Now we need to define this method inside the javascript as shown below

 

 

script.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
let doc = new jsPDF()
 
        doc.autoTable({
            head:[['Name','Age','Country']],
            body:[['Gautam',25,'India'],['Smith',25,'Australia'],['Jim',25,'New Zealand']],
            headerStyles:{
                lineWidth:2,
                lineColor:[255,0,255]
            }
        })
 
        doc.save("output.pdf")

 

 

As you can see we are making a new pdf document using the jspdf constructor and inside it we are inserting the table using the autoTable() method and then we are providing the head and the body of the table. And then to style the header cells we are providing the property which is headerStyles which basically contains the lineWidth and lineColor property for the table. As you can see we have given the rgb color values. And then we are saving the pdf document

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • 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