纯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项目。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13116