JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<button onclick="exportTableToExcel()">Export Table Data To Excel File</button>

JavaScript

const sampleData = [{
    name: "Arif",
    email: "[email protected]",
    country: "India"
  }, {
    name: "Manogya",
    email: "[email protected]",
    country: "India"
  },
  {
    name: "Avishek",
    email: "[email protected]",
    country: "India"
  },
  {
    name: "Radikha",
    email: "[email protected]",
    country: "Srilanka"
  }
];

const setTitle = () => {
  var tds = "";
  Object.keys(Object.assign({}, ...sampleData)).forEach(label => {
    tds += `<th>${label}</th>`
  });
  return tds;
}

const setBody = () => {
  var trs = "";
  setTd = (obj) => {
    let td = "";
    Object.values(obj).forEach(v => td += `<td>${v}</td>`);
    return td;
  }
  sampleData.forEach(object => {
    trs += `<tr>${setTd(object)}</tr>`
  });
  return trs;
}

function exportTableToExcel(tableID, filename = '') {
  var downloadLink;
  var dataType = 'application/vnd.ms-excel';
  var tableSelect = `<table>
   <thead>
    <tr>
       ${setTitle()}
    </tr>
    </thead>
    <tbody>
   		${setBody()}
    </tbody>
</table>`;

  filename = filename ? filename + '.xls' : 'excel_data.xls';
  downloadLink = document.createElement("a");
  document.body.appendChild(downloadLink);
  if (navigator.msSaveOrOpenBlob) {
    var blob = new Blob(['\ufeff', tableSelect], {
      type: dataType
    });
    navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    downloadLink.href = 'data:' + dataType + ', ' + tableSelect;
    downloadLink.download = filename;
    downloadLink.click();
  }
}