JsPDF-Autotable Tutorial to Style Rows & Columns of Table Inside PDF Document Using CSS Properties in Javascript

You are currently viewing JsPDF-Autotable Tutorial to Style Rows & Columns of Table Inside PDF Document Using CSS Properties in Javascript

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>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply