JsPDF-Autotable Tutorial to Insert Array of Json Objects Data in HTML5 Table Inside PDF Document in Javascript

You are currently viewing JsPDF-Autotable Tutorial to Insert Array of Json Objects Data in HTML5 Table Inside PDF Document in Javascript

jsPDF-Autotable Tutorial to Insert Array of JSON Objects Data in HTML5 Table inside PDF Document 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
    });
    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