Skip to content

WebNinjaDeveloper.com

Programming Tutorials




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

  • 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