CSV导出实战攻略：从踩坑到高效实现的全过程
UI美荣我的写法，亲测靠谱
CSV导出这玩意儿在很多项目里都挺常见的，比如数据报表、用户导出等等。我一般这样处理，既能保证功能的稳定性，又能尽量减少坑。
首先，上代码：
这个函数 exportToCSV 接受两个参数：一个是数据数组，另一个是文件名。它会生成一个 CSV 文件并触发下载。这个方法的好处是简单直接，而且兼容性也不错。不过，这里有几个细节需要注意：
- 数据格式：每个子数组表示一行，每个元素用逗号分隔。
- 编码：使用
encodeURI来处理特殊字符，防止乱码。 - 浏览器兼容性：创建并点击
<a>标签来触发下载，这种方式在大部分现代浏览器中都能正常工作。
这几种错误写法，别再踩坑了
在我实际开发过程中，踩过不少坑。这里分享几个常见的错误写法，希望你们能避开这些坑。
1. 直接用 window.open 导致下载失败
有些人可能会直接用 window.open 来尝试下载 CSV 文件，但这种方式在很多情况下会失败。例如：
<code classjavascript
const csvContent = 'data:text/csv;charset=utf-8,' + data.map(row => row.join(',')).join('n');
window.open(encodeURI(csvContent));
这种写法在某些浏览器中可能会被拦截，导致无法下载文件。所以，还是建议用 <a> 标签的方式来触发下载。
2. 不处理特殊字符导致乱码
如果数据中含有特殊字符（如中文），不进行编码处理会导致乱码。例如：
这种写法在处理包含中文的数据时，会出现乱码问题。一定要记得用 encodeURI 进行编码。
3. 忽略浏览器兼容性
有些开发者可能只在某个特定浏览器上测试通过，就认为代码没问题了。实际上，不同的浏览器对下载行为的支持程度不同。例如，在 Firefox 中，如果不将 <a> 标签添加到文档中，下载链接可能不会生效。所以，一定要确保在所有主流浏览器中都测试过。
实际项目中的坑
在实际项目中，CSV 导出的需求往往更复杂，比如需要处理大数据量、多语言支持、自定义格式等等。这里分享一些我在实际项目中遇到的问题和解决方案。
大数据量导出
当数据量很大时，直接在前端生成 CSV 文件可能会导致性能问题。这时候可以考虑后端生成 CSV 文件，然后前端通过 API 请求下载。例如：
<code classjavascript
async function exportToCSV() {
const response = await fetch('https://jztheme.com/api/export-csv');
if (response.ok) {
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'users.csv';
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
} else {
console.error('Failed to download CSV');
}
}
这种方式的好处是前端不需要处理大量数据，性能更好。同时，后端也可以更好地控制生成过程，比如分批处理、压缩等。
多语言支持
如果项目需要支持多语言，那么在生成 CSV 文件时要注意字符编码。例如，对于中文数据，可以设置 charset=utf-8：
同时，后端生成 CSV 文件时也要确保使用正确的字符编码。
自定义格式
有时候，客户会要求导出的 CSV 文件有特定的格式，比如日期格式、数字格式等。这时候可以在生成 CSV 文件时进行格式化。例如：
<code classjavascript
const formatDate = (date) => date.toISOString().slice(0, 10);
const formatNumber = (num) => num.toFixed(2);
const data = [
['Name', 'Age', 'Birth Date', 'Salary'],
['Alice', '30', formatDate(new Date('1990-01-01')), formatNumber(5000)],
['Bob', '25', formatDate(new Date('1995-06-15')), formatNumber(4500)]
];
const csvContent = 'data:text/csv;charset=utf-8,' + data.map(row => row.join(',')).join('n');
const encodedUri = encodeURI(csvContent);
const link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'users.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
这样可以确保导出的 CSV 文件符合客户的格式要求。
结尾
以上是我总结的一些 CSV 导出的最佳实践和踩坑经验。希望对你有所帮助。如果有更好的方案或者补充，欢迎在评论区交流。
