如何使用 JavaScript 将 HTML 表格导出为 CSV？

在一些 web 应用程序中，我们经常需要将 HTML 表格导出为 CSV 文件以方便用户将数据转移到其他应用程序或处理表格数据。本文将介绍如何使用 JavaScript 将 HTML 表格导出为 CSV。

准备工作

1. 确保你的 HTML 表格符合以下格式：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

2. 添加导出按钮和编写导出函数

<button onclick="exportTableToCSV('members.csv')">导出为 CSV</button>

其中，exportTableToCSV 是我们要编写的导出函数。

3. 添加以下 JavaScript 代码

function exportTableToCSV(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(","));
  }

  // 下载 CSV 文件
  downloadCSV(csv.join("\n"), filename);
}

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

  csvFile = new Blob([csv], {type: "text/csv"});
  downloadLink = document.createElement("a");
  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvFile);
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();
}

流程解析

我们先定义了一个 exportTableToCSV 函数，这个函数用来获取表格数据和生成 CSV 文件。它首先获取了表格的所有行和它们的列，然后将它们组合为一个 CSV 数组。最后，它将这个 CSV 数组转换为字符串，然后调用 downloadCSV 函数下载这个 CSV 文件。

downloadCSV 函数用于使用浏览器的下载功能下载这个 CSV 文件。它首先将 CSV 数据转换为一个 Blob 对象，然后创建一个下载链接并为其设置 download 属性和 href 属性，最后将链接添加到页面的 body 部分并模拟点击。这样就会触发下载该文件的操作。

以上就是使用 JavaScript 将 HTML 表格导出为 CSV 的完整流程。希望这篇文章能对你有所帮助。