序言

对于后台管理系统而言（这里指前端部分），可视化的表格展现数据是必不可少的部分，而将这些表格数据导出为 Excel 或 Number 等软件可打开的文件的这种需求也很常见，一般这个功能都是在服务器端如 node 实现，但是现在我们换一个角度。

前端能够将数据展现出来，这意味着前端已经拿到了这些数据，而至于后续想怎么操作完全看自己心情，那么能否脱离后台实现上述需求呢？答案是肯定的，下面简单的介绍一种轻量化的导出方法。

CSV、Blob、a.download

CSV 名为逗号分隔值（也叫字符分隔值），是一种纯文本。每列数据以逗号 '，' 分隔，每行数据以 ' \r\n ' 分隔。

为了在前端实现对文件的操作，我们需要用到 Web API 中的 Blob 对象， 一个 Blob 对象表示一个不可变的、原始数据的类似文件对象，利用此 Blob 对象即可将 CSV 原始数据封装。

另外为了在前端触发文件的下载，还需要用到 a 标签的 download 属性，当然还有 href 属性对文件对象的引用。

实战

啰嗦了一大堆，来点代码才是最实际的，这里的重点其实就是将手里的数据（大部分是 json 形式的数组格式）转换为 CSV 的形式。

如上图所示，我准备了一个 json 格式的数组作为原始数据，首先我们定义每一列的表头，然后根据表头的顺序遍历 json 数组以逗号分隔依次拼接每一列的内容，每一个 json 对象构成了表格中的一行，因此遍历完随即加上 ' \r\n ' 分隔为行。

将文件下载的操作进行封装，设置 download 标识，依次判断是否触发了下载的操作，上图中我都进行了注释。

注意

使用 CSV 一个很重要的点是，对于数字，Excel 会自动展示为科学计数法的形式，对于上述例子中的 ' 1-1 ' 的形式，Excel 会自动展示为 ' 1月1日 '，为了避免这种情况，请使用制表符加逗号 ' \t，' 作为分隔符。 

进阶

也许你应该注意到了上述例子中的表头生成的很突兀，而且对应表头生成数据的形式也很死板，下面我们就对此进行改进。

在数据库中存储的数据 key 值肯定是英文而不是中文，但是作为表头展示时当然又得用中文，对此，我们提供一个配置项 config 来说明表头的中英文对应关系。

上图中，我们进一步的封装，对函数提供两个参数，第一个参数 data 传递 json 数组形式的原始数据，第二个 config 参数以对象的形式传递可配置的表头中英文对应关系。

而在生成具体的表头和表格内容时根据 config 配置项，一一对应拼接。

结语

这次站在前端的角度写了这篇文章，仅仅为了提供了另一种在前端就生成表格数据的方法，当然 CSV 是很轻量的，其无碍于你使用哪种前端框架（react、vue、angular 都可以），而缺点就是其并不能直接进行合并单元格这类更复杂的操作，但是仅仅为了展示数据的话也是不错的选择，毕竟减少了对后台的依赖以及前后文件传输的过程，最后怎么选择当然全看你自己了。