如何导出含下拉选择框的HTML表格为格式正确的CSV文件

问题根源 #

原导出函数直接读取单元格innerText，而下拉选择框<select>的innerText会包含所有选项的文本内容，并非仅选中值，因此导致导出格式混乱。

修复方案 #

直接替换你代码中的export2csv函数为以下版本即可同时满足两个需求：

function export2csv() {
  const tableData = [];
  const rows = document.querySelectorAll("table tr");
  for (const row of rows) {
    const rowData = [];
    for (const column of row.querySelectorAll("th, td")) {
      let cellValue;
      // 先判断单元格内是否有下拉选择框
      const selectEl = column.querySelector('select');
      if (selectEl) {
        // 取下拉框选中值
        cellValue = selectEl.value;
        // 选中Null时替换为空
        if (cellValue === 'Null') cellValue = '';
      } else {
        // 普通单元格直接取文本
        cellValue = column.innerText;
      }
      // 所有字段统一加双引号，避免内容含逗号导致格式错位
      rowData.push(`"${cellValue}"`);
    }
    tableData.push(rowData.join(","));
  }
  const csvContent = tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([csvContent], { type: "text/csv;charset=utf-8;" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

修改点说明 #

• 导出时优先检测单元格内是否存在下拉选择框，存在则直接读取选中值，而非读取所有选项文本
• 下拉选中值为Null时自动替换为空字符串，导出后对应单元格为空
• 优化引号逻辑，所有字段统一包裹双引号，避免任意列内容含逗号导致的CSV列错位问题

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH