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

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.

<!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>

<!DOCTYPE html>

<head>

<title>jspdf-autotable Change border color of header cells</title>

</head>

<body>

<button onclick="generatePDF()">Generate PDF</button>

</body>

</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

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")

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