前端花式玩转CSV导出，无须后端搞定文件下载

前端

2022-11-30 10:30:30

前端CSV导出：无需后端，轻松导出数据

前言

在前端开发中，导出数据到客户端是常见的需求。CSV（逗号分隔值）文件是一种流行的数据格式，因其易于读取和操作而受到欢迎。以往，CSV导出需要后端参与，但现在，我们可以使用前端技术直接导出CSV文件，从而简化开发流程。

前端CSV导出原理

前端CSV导出遵循以下原理：

数据转换为CSV文本： 将数据转换为逗号分隔的文本字符串。
创建Blob对象： 使用Blob()方法创建一个包含CSV文本的Blob对象。
生成CSV文件URL： 使用URL.createObjectURL()方法生成Blob对象的URL，该URL指向一个虚拟CSV文件。
下载文件： 通过<a>标签的download属性，使用生成的URL触发文件下载。

前端CSV导出步骤

按照以下步骤实现前端CSV导出：

转换数据： 使用数组或对象将数据转换为CSV文本，例如：['姓名', '年龄', '城市'], ['张三', 20, '北京']
创建Blob： 使用Blob()方法创建一个Blob对象：const blob = new Blob([csvContent], {type: 'text/csv;charset=utf-8;'})
生成URL： 使用URL.createObjectURL()方法生成CSV文件URL：const csvURL = URL.createObjectURL(blob)
下载文件： 创建一个<a>标签并设置href和download属性：

<a href="**{csvURL}** " download="**{filename}.csv** ">下载CSV</a>

注意事项

确保数据正确转换为CSV文本。
设置Blob对象的类型为text/csv;charset=utf-8;。
记得使用URL.revokeObjectURL(csvURL)释放CSV文件URL。

示例代码

const data = [['姓名', '年龄', '城市'], ['张三', 20, '北京'], ['李四', 30, '上海'], ['王五', 40, '广州']];
const csvContent = data.map(row => row.join(',')).join('\n');
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const csvURL = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = csvURL;
link.download = 'data.csv';
link.click();

URL.revokeObjectURL(csvURL);