JSFiddle - React, Tailwind, and code Playground

by kelvin88degrees

HTML

<table cellspacing="0" border="0">
  <colgroup width="85" span="42"></colgroup>
  <tbody>
    <tr>
      <td height="17" align="left">ACTIVE</td>
      <td align="left">TERMINALID</td>
      <td align="left">TERMINALTYPE</td>
      <td align="left">TERMINALCATEGORY</td>
      <td align="left">DEVICEID</td>
      <td align="left">OPERATOR</td>
      <td align="left">AMOUNT</td>
      <td align="left">AUTOREADY</td>
      <td align="left">COMMERCETYPE</td>
      <td align="left">CUSTOMER</td>
      <td align="left">RECEIPTDETAILSREQUIRED</td>
      <td align="left">AVS</td>
      <td align="left">CARDENTRYMODE</td>
      <td align="left">CURRENCYRATE</td>
      <td align="left">CUSTOMFIELD</td>
      <td align="left">DEBITACCOUNTTYPE</td>
      <td align="left">DEVICETYPE</td>
      <td align="left">MERCHANTREFERENCE</td>
      <td align="left">ORDERID</td>
      <td align="left">KEYEDCARD</td>
      <td align="left">KEYEDASTRACK2</td>
      <td align="left">SECURECARD</td>
      <td align="left">TRACK2</td>
      <td align="left">TRACK2CONTACTLESS</td>
      <td align="left">EMV</td>
      <td align="left">EMVTLV</td>
      <td align="left">VOUCHER</td>
      <td align="left">APPLEWALLET</td>
      <td align="left">ANDROIDWALLET</td>
      <td align="left">PERMITTEDTERMINALS</td>
      <td align="left">REQUESTTYPE</td>
      <td align="left">TAXES</td>
      <td align="left">TIP</td>
      <td align="left">TRANSACTIONTYPE</td>
      <td align="left">MESSAGEDIGESTALGORITHM</td>
      <td align="left">DIGEST</td>
      <td align="left">DATETIME</td>
      <td align="left">SECRETPHRASE</td>
      <td align="left">CONTENTTYPE</td>
      <td align="left">APPLYCONFIGSCRIPTS</td>
      <td align="left">VERIFICATIONRULES</td>
      <td align="left">USERCOMMENTS</td>
    </tr>
    <tr>
      <td sdnum="6153;0;@" height="17" align="left">TRUE</td>
      <td sdval="16002" sdnum="6153;" align="right">16002</td>
      <td align="left">CHP</td>
      <td align="left">DNU</td>
 ...

CSS

* {
  color: #2b2b2b;
  font-family: "Roboto Condensed";
}

th {
  text-align: left;
  color: #4679bd;
}

tbody>tr:nth-of-type(even) {
  background-color: #daeaff;
}

button {
  cursor: pointer;
  margin-top: 1rem;
}

JavaScript

function download_csv(csv, filename) {
  var csvFile;
  var downloadLink;

  // CSV FILE
  csvFile = new Blob([csv], {
    type: "text/csv"
  });

  // Download link
  downloadLink = document.createElement("a");

  // File name
  downloadLink.download = filename;

  // We have to create a link to the file
  downloadLink.href = window.URL.createObjectURL(csvFile);

  // Make sure that the link is not displayed
  downloadLink.style.display = "none";

  // Add the link to your DOM
  document.body.appendChild(downloadLink);

  // Lanzamos
  downloadLink.click();
}

function export_table_to_csv(html, filename) {
  var csv = [];
  var rows = document.querySelectorAll("table tr");

  for (var i = 0; i < rows.length; i++) {
    var row = [],
      cols = rows[i].querySelectorAll("td, th");

    for (var j = 0; j < cols.length; j++)
      row.push(cols[j].innerText);

    csv.push(row.join(","));
  }

  // Download CSV
  download_csv(csv.join("\n"), filename);
}

document.querySelector(".EMV").addEventListener("click", function() {
  var html = document.querySelector("table").outerHTML;
  export_table_to_csv(html, "table.csv");
});