点击按钮导出HTML表格为CSV文件的功能异常求助

你的代码存在4个核心问题，导致功能异常或导出内容格式错误：

• HTML结构不符合规范：按钮被直接放置在<table>标签内部，部分浏览器会出现解析异常
• 缺少CSV内容转义逻辑：当单元格本身包含逗号时，直接拼接会导致导出的CSV列错位
• HTML属性存在无效转义：align=\ "right"中的多余斜杠和空格属于语法错误
• 未清理临时创建的DOM节点和URL对象，会造成页面残留无用元素和内存泄漏

HTML 部分 #

<button onclick="exportTableToCSV('members.csv');">导出HTML表格为CSV文件</button>
<table border="1">
  <tr>
    <th></th>
    <th>sub_domain</th>
    <th>nReviews</th>
    <th>Ratings_e</th>
    <th>Text_e</th>
    <th>rn</th>
  </tr>
  <tr>
    <td align="right">1</td>
    <td>a1</td>
    <td align="right">2</td>
    <td>1, 2</td>
    <td>asd, dfdsf</td>
    <td align="left">1</td>
  </tr>
</table>

JavaScript 部分 #

function exportTableToCSV(filename) {
  const csv = [];
  const rows = document.querySelectorAll("table tr");

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

    for (let j = 0; j < cols.length; j++) {
      // 对单元格内容做CSV格式转义，避免内容含逗号、双引号时格式错乱
      const cellContent = cols[j].innerText.trim().replace(/"/g, '""');
      row.push(`"${cellContent}"`);
    }
    csv.push(row.join(","));
  }

  downloadCSV(csv.join("\n"), filename);
}

function downloadCSV(csv, filename) {
  // 增加UTF-8 BOM头，解决Excel打开CSV时中文乱码问题
  const csvWithBom = "\ufeff" + csv;
  const csvFile = new Blob([csvWithBom], { type: "text/csv;charset=utf-8;" });
  const downloadLink = document.createElement("a");

  downloadLink.download = filename;
  downloadLink.href = window.URL.createObjectURL(csvFile);
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);

  downloadLink.click();

  // 清理临时资源
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(downloadLink.href);
}

内容的提问来源于stack exchange，提问作者user11740857