纯前端下载数据到本地

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

介绍

• json2csv

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

• file-saver

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

安装包

在项目目录下执行

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

  直接在h5中使用

  FileSaver官方只说了使用npm安装，不过我们可以直接在源码中下载编译好的js（dist目录下），就可以直接使用了，这里可以参考,我最近使用的是17年的js，这样体验和npm安装的完全一样。