jsPDF-Autotable Tutorial to Style Rows & Columns of Table inside PDF Document Using CSS Properties in Javascript
<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.2.3/jspdf.plugin.autotable.min.js"></script>
<button id="generate">Generate PDF</button>
<table id="my-table"></table>
<script>
var elem = document.getElementById("generate");
var result = [
{
name: "Gautam Sharma",
age: 32,
country: "India",
},
{
name: "John Williamson Latham",
age: 31,
country: "New Zealand",
},
{
name: "Adam Nicholls",
age: 31,
country: "South Africa",
},
];
let info = [];
result.forEach((element, index, array) => {
info.push([element.name, element.age, element.country]);
});
elem.onclick = function () {
var doc = new jsPDF();
console.log(result);
doc.autoTable({
head: [["Name", "Age", "Country"]],
body: info,
headStyles: {
fontStyle: "normal",
font: "Helvetica",
fillColor: "#fdfdfd",
textColor: "#1c1c1c",
fontSize: 12,
},
bodyStyles: {
fontStyle: "bold",
fontSize: 19,
font: "helvetica",
fillColor: [34, 67, 45],
},
});
doc.save("table.pdf");
};
</script>
