CSV文件下载时内容中#字符导致数据截断问题如何解决

问题原因 #

encodeURI 不会编码URI保留字符#，浏览器解析data: URI时会把#识别为片段标识符的开头，直接截断#之后的所有内容，导致最终下载的CSV文件不完整。你之前使用Blob方案没生效大概率是使用方法不正确。 #

方案1：替换编码方法 #

将CSV数据部分单独用encodeURIComponent编码，而不是对整个data URI使用encodeURI，encodeURIComponent会对#这类特殊符号进行编码，避免被浏览器截断。
修复后代码：

const rows = [ ["Html", "Css", "JavaScript"], ["C #", "C++", "Python"] ];
// 处理CSV内容
const csvData = rows.map(e => e.join(",")).join("\n");
// 仅对数据部分使用encodeURIComponent编码
const csvContent = "data:text/csv;charset=utf-8," + encodeURIComponent(csvData);

const link = document.createElement("a");
link.href = csvContent;
link.download = "my_data.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

方案2：使用Blob生成下载链接（推荐） #

Blob方案对大文件兼容性更好，也不会出现特殊字符截断问题，正确使用方法如下：

const rows = [ ["Html", "Css", "JavaScript"], ["C #", "C++", "Python"] ];
// 处理CSV内容，可配合下方的字段转义方法使用
const csvData = rows.map(e => e.join(",")).join("\n");
// 生成Blob对象
const csvBlob = new Blob([csvData], { type: "text/csv;charset=utf-8" });
// 生成Blob临时链接
const blobUrl = URL.createObjectURL(csvBlob);

const link = document.createElement("a");
link.href = blobUrl;
link.download = "my_data.csv";
document.body.appendChild(link);
link.click();
// 清理节点和临时链接
document.body.removeChild(link);
URL.revokeObjectURL(blobUrl);

额外优化建议 #

如果CSV内容中存在逗号、换行、双引号这类CSV规范内的特殊字符，建议先对每个字段做转义处理，避免CSV解析错位：

// CSV字段转义方法
const escapeCsvField = (field) => {
  const str = String(field);
  if (str.includes(',') || str.includes('"') || str.includes('\n')) {
    // 内部双引号替换为两个双引号，外层包裹双引号
    return `"${str.replace(/"/g, '""')}"`;
  }
  return str;
}
// 生成CSV内容时调用转义方法
const csvData = rows.map(row => row.map(escapeCsvField).join(",")).join("\n");

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