我的CSV下载代码存在什么缺失，导致下载页面源码而非目标数据？

问题原因 #

你的代码存在多个核心错误导致导出异常：

• data URI的charset参数拼写错误，原代码写为charset-utf=8，正确写法为charset=utf-8
• 内容编码使用encodeURI不符合要求，应该使用encodeURIComponent才能正确编码所有特殊字符
• 未处理CSV字段的特殊字符（逗号、双引号、换行符），会导致导出的CSV格式混乱
• 多余的target="_blank"配置可能导致浏览器拦截下载，而非直接触发文件保存
• 字段拼接时加了多余的空格, ，会导致导出的字段开头多冗余空格

修复后代码 #

// 定义CSV字段转义方法，处理特殊字符
function escapeCsvField(field) {
    // 空值转空字符串
    const str = field == null ? '' : String(field);
    // 包含逗号、双引号、换行的字段需要用双引号包裹，内部双引号转义为两个双引号
    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
        return `"${str.replace(/"/g, '""')}"`;
    }
    return str;
}

// 构建CSV内容
const headers = ["Title", "URI", "Meta description", "Main heading", "Body text"];
let csvContent = headers.map(escapeCsvField).join(',') + '\n';

keyArray.forEach(function(row){
    // 每行的每个字段都做转义后再拼接
    const escapedRow = row.map(escapeCsvField);
    csvContent += escapedRow.join(',') + '\n';
});

console.log(csvContent);
// 修正charset拼写，使用正确的编码方法
downloadContent.href = "data:text/csv;charset=utf-8," + encodeURIComponent(csvContent);
downloadContent.download = "file.csv";
downloadContent.click();

额外注意事项 #

• 请确保keyArray中每一行数组的字段顺序和表头顺序完全一致，避免字段错位
• 如果导出的CSV用Excel打开出现乱码，可以添加BOM头解决，修改href配置为：
  downloadContent.href = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(csvContent);

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