csv datatable 乱码 导出_填坑:前端导出csv文件

在前后端分离的情况下，通常前端浏览器提供用户文件下载的功能的实现方式如下：前端请求后端api

后端根据前端的请求生成一个文件

后端返回一个下载的url地址

前端利用a标签的download属性，实现用户的点击下载。

在jquery中的dataTable有非常方便的导出csv的功能，但是jquery对于现在的web来说太重了，我也不需要其中的大部分功能，所以我实现了一个简单的csv文件生成导出的模块，方便日常使用。

是否应该在前端导出csv文件？

对用用户需要简单的导出表格中数据的功能，通过前端实现，一方面可以减少一次api的请求，提升响应速度，另一方面，有时候客户可能确实需要这样一个在前端导出csv文件的功能，比如用户需要选中表格中某几行数据进行导出，显然在前端可以更便捷灵活的操作。

demo

本文中，我将实现一个将表格数据转换为csv的格式，并生成一个指定文件名的csv文件，供用户下载的功能。

我将该功能进行了封装发布到了npm上

csv-exportor

demo实现基于前端框架vue2.0，但是事实上适用于任何前端框架。

示例demo

具体实现

本身的实现其实不难，但是遇到了挺多的坑，所以总结一下。

将表格数据转换为csv格式

这里为了方便起见，我使用了库comma-separated-values，无论性能还是使用都没什么问题。

import CSV from 'comma-separated-values';

// data为表格数据&#