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