如何导出含下拉列表的HTML表格为CSV，且Null选项导出为空单元格

核心问题原因 #

原导出逻辑直接读取单元格innerText，而下拉框的innerText会包含所有option的文本内容，同时硬编码每3列加引号的逻辑无法适配动态新增的列，所以导出格式混乱。

1 导出逻辑调整方案 #

直接替换你代码里的export2csv函数为以下版本即可同时解决两个问题：

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = document.querySelectorAll("table tr");
  for (const row of rows) {
    const rowData = [];
    for (const column of row.querySelectorAll("th, td")) {
      let cellVal;
      // 检测单元格内是否存在下拉选择框
      const selectEl = column.querySelector('select');
      if (selectEl) {
        // 仅取下拉框的当前选中值
        cellVal = selectEl.value;
        // 选中Null时自动替换为空字符串
        if (cellVal === 'Null') {
          cellVal = '';
        }
      } else {
        // 普通单元格直接取文本内容
        cellVal = column.innerText;
      }
      // 所有字段统一加双引号，避免内容含逗号导致CSV格式错乱
      rowData.push(`"${cellVal}"`);
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  // 额外指定utf-8编码避免中文乱码
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv;charset=utf-8;" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

2 修改点说明 #

• 仅导出下拉选中值：新增了下拉元素检测逻辑，不会再导出所有下拉选项，只会取当前选中的值
• Null值转空：判断到选中值为Null时自动替换为空字符串，导出的对应单元格不会显示任何内容
• 通用格式兼容：去掉了原逻辑中硬编码的每3列加引号的规则，所有字段统一加双引号，不管新增多少列都能保证CSV格式正确

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