纯JavaScript导出CSV文件：简单安全无依赖
你是否需要将网页上的数据保存到Excel中？很多时候，我们只是想快速导出一些数据，不想引入复杂的库。其实用纯JavaScript就能轻松实现这个功能，而且效果很好。
什么是CSV文件？
CSV是一种简单的文件格式，用逗号分隔数据，每行代表一条记录。Excel可以直接打开这种文件，把它显示成表格形式。
基本实现方法
实现CSV导出只需要三个步骤：
把数据转换成CSV格式的文本
创建文件对象
触发浏览器下载
下面是完整的代码示例：
// 示例数据：文章列表
const posts = [
{
id: 1,
title: '用 Vite 搭建 react 18 项目',
link: 'https://example.com/vite-react18',
img: 'https://example.com/cover/vite-react.jpg',
views: 12034
},
{
id: 2,
title: 'Tailwind css 3 响应式布局技巧',
link: 'https://example.com/tailwind-layout',
img: 'https://example.com/cover/tailwind.jpg',
views: 8721
},
{
id: 3,
title: '深入浅出浏览器事件循环',
link: 'https://example.com/event-loop',
img: 'https://example.com/cover/event-loop.jpg',
views: 15003
}
];
// 表头映射
const headers = ['id', '名称', '链接', '图片', '阅读'];
// 处理特殊字符，防止CSV格式错误
function escapeCSV(value) {
const str = String(value);
// 如果包含逗号、引号或换行符，需要用引号包围
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
return `"${str.replace(/"/g, '""')}"`;
}
return str;
}
// 生成CSV内容
const csvContent = [
headers.join(','), // 表头行
...posts.map(item => [
escapeCSV(item.id),
escapeCSV(item.title),
escapeCSV(item.link),
escapeCSV(item.img),
escapeCSV(item.views)
].join(','))
].join('\n');
// 添加BOM头，解决Excel中文乱码问题
const bom = '\uFEFF';
const blob = new Blob([bom + csvContent], { type: 'text/csv;charset=utf-8;' });
// 创建下载链接
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = `文章信息_${new Date().toISOString().slice(0, 10)}.csv`;
link.style.display = 'none';
// 触发下载
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);代码细节说明
处理特殊字符
CSV文件有简单的规则：字段中包含逗号、引号或换行符时，需要用双引号包围。如果字段中有双引号，需要转义成两个双引号。我们的escapeCSV函数就是做这个工作的。
这个处理还有一个重要作用：防止CSV注入攻击。如果有人在你导出的数据中输入=1+1这样的内容，Excel会把它当作公式执行。经过我们的转义处理，这种风险就被消除了。
解决中文乱码
在Windows版的Excel中，直接打开UTF-8编码的CSV文件可能会显示乱码。我们在文件开头添加了BOM头（\uFEFF），告诉Excel这是UTF-8编码的文件，这样中文就能正常显示了。
创建下载链接
我们使用Blob对象把文本转换成文件，然后用URL.createObjectURL生成临时链接。通过设置<a>标签的download属性，浏览器就知道要下载文件而不是跳转页面。
下载完成后，记得移除临时创建的元素并释放URL对象，这样可以避免内存泄漏。
实际测试
你可以立即测试这个功能：
打开任意网页
按F12打开开发者工具
切换到Console（控制台）
将上面的完整代码复制粘贴进去，按回车运行
你会立即看到一个CSV文件被下载到电脑中。用Excel或WPS打开它，数据整齐排列，中文显示正常。
封装成实用函数
为了在实际项目中更方便地使用，我们可以把这个功能封装成一个函数：
function exportToCSV(data, headers, filename) {
// 处理数据，生成CSV内容
const escapeCSV = (value) => {
const str = String(value);
if (str.includes(',') || str.includes('"') || str.includes('\n')) {
return `"${str.replace(/"/g, '""')}"`;
}
return str;
};
const headerNames = headers.map(h => h.label || h);
const headerKeys = headers.map(h => h.key || h);
const csvContent = [
headerNames.join(','),
...data.map(item =>
headerKeys.map(key => escapeCSV(item[key])).join(',')
)
].join('\n');
// 创建并触发下载
const bom = '\uFEFF';
const blob = new Blob([bom + csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.href = url;
link.download = filename || `export_${new Date().toISOString().slice(0, 10)}.csv`;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
// 使用示例
const headers = [
{ key: 'id', label: 'ID' },
{ key: 'title', label: '标题' },
{ key: 'views', label: '阅读量' }
];
// 调用函数导出数据
exportToCSV(posts, headers, '文章数据.csv');这个封装后的函数更加灵活，可以指定要导出的字段和对应的显示名称。
适用场景
这种纯JavaScript导出CSV的方法适用于：
后台管理系统中的数据导出
报表数据的下载
用户操作记录的导出
任何需要简单数据导出的场景
它的优点是零依赖、体积小、速度快，在现代浏览器中都能正常工作。
局限性
CSV格式虽然简单通用，但也有一些限制：
不支持单元格样式
不支持多工作表
不支持复杂的数据类型
如果需要这些高级功能，可以考虑使用专门的库如SheetJS，但这会增加项目体积。
总结
用纯JavaScript导出CSV文件其实很简单。核心就是理解CSV的文本格式，然后用Blob对象和下载链接触发浏览器下载。这种方法不需要任何外部库，代码量少，性能好，能满足大部分基本的数据导出需求。
掌握了这个技术后，你可以在任何JavaScript项目中轻松实现数据导出功能，无论是React、vue还是原生JavaScript项目。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
