纯前端下csv载数据到本地

纯前端下载数据到本地

这个需求来自于前段时间，我已经做好了一个数据展示页面，如下图所示（当时还没有生成文件的功能），然后需求方面提出要在现在基础上对所有数据进行去重，然后导出一个csv文件，我当时想，如果能够少许改动后端（在现有后端基础上，只对数据进行去重）就好了，其他还是交给前端，这样能够快速实现，而且也方便维护，于是就Google了下，发现json2csv 和 file-saver 这两个包结合使用，正好满足了我的需求。

github纯前端下载数据到本地

介绍

• json2csv

通过名字，也可以清楚的知道，其作用是将json数据转换为csv，点击查看项目主页

• file-saver

file-saver一个比较好的客户端保存文件的解决方案，适合在客户端生成文件的web应用程序，但是如果你的文件过大，使用这个就不太好了，可以使用StreamSaver.js。支持的浏览器与文件大小限制如下表所示：

Browser	Constructs as	Filenames	Max Blob Size	Dependencies
Firefox 20+	Blob	Yes	800 MiB	None
Firefox < 20	data: URI	No	n/a	Blob.js
Chrome	Blob	Yes	[2GB][3]	None
Chrome for Android	Blob	Yes	[RAM/5][3]	None
Edge	Blob	Yes	?	None
IE 10+	Blob	Yes	600 MiB	None
Opera 15+	Blob	Yes	500 MiB	None
Opera < 15	data: URI	No	n/a	Blob.js
Safari 6.1+*	Blob	No	?	None
Safari < 6	data: URI	No	n/a	Blob.js
Safari 10.1+	Blob	Yes	n/a	None

安装包

在项目目录下执行

npm install json2csv --save
npm install file-saver --save

示例

demo源码

• 伪代码

//具体可以看demo，直接down下来运行可以测试具体效果
downLoad () {
  //json 数据
  const data = []
  //数据中key和header对应关系，可以不加，这样header默认key名
  const fields = []
  const opts = {
	fields
  }
  const json2csvParser = new Parser(opts)
  const csv = json2csvParser.parse(data)
  let blob = new Blob(['\uFEFF' + csv], {
	type: 'text/plaincharset=utf-8'
  })
  FileSaver.saveAs(blob, fileName)
}

伪代码中'\uFEFF'是指增加的BOM，这样，无论是windows还是类 unix 系统，都会根据这个BOM来识别编码，就不会乱码了。
具体详情可以参考：https://www.cnblogs.com/sparkdev/p/5676654.html
https://baike.baidu.com/item/BOM/2790364