网页json数据转换成csv数据并提供下载链接

前言

数据相关网站有时需要提供数据下载链接，以便于用户下载数据。网页上尝试用json数据，但是用户

环境

• Windows10
• jquery2.1.4

方法

1. HTML文件中加入下载标签
2. 
   
3. <!-- 下载链接 -->
4. <div id="download"></div>
5. 假设已有json数据ret：

ret = [{name: "motor1", temp1: 48, temp2: 49, time: "2018-05-17 10:21:53", length: 10},
{name: "motor1", temp1: 48, temp2: 48, time: "2018-05-17 10:21:30", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:50", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:49", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:47", length: 10},
{name: "motor1", temp1: 64, temp2: 48, time: "2018-05-15 16:52:46", length: 10},
{name: "motor1", temp1: 64, temp2: 64, time: "2018-05-15 16:52:36", length: 10},
{name: "motor1", temp1: 64, temp2: 64, time: "2018-05-15 16:51:55", length: 10},
{name: "motor1", temp1: 64, temp2: 70, time: "2018-05-15 16:19:53", length: 10},
{name: "motor1", temp1: 64, temp2: 72, time: "2018-05-15 16:18:18", length: 10}]
1
2
3
4
5
6
7
8
9
10
11

1. 使用json转csv的库json2csv, 下载后导入库
2. 
   
3. <script src="/static/js/json2csv.js" type="text/javascript"></script>
4. json数据转cvs并生成下载链接
5. 
   
6. <script>
7. var myData = []，
8. length = 10;
9. // 我的json数据从后端传过来的，需要导入一下，否则读不到，大家根据情况使用，可删掉
10. for(var i = 0; i<length; i++){
11. myData.push(ret[i]);
12. }
13. // 将json数据转化为csv
14. var fields = ['name', 'temp1', 'temp2', 'time'];
15. var result = json2csv({ data: myData, fields: fields });
16. // 创建下载链接
17. var data = "data:text/csv;charset=utf-8," + encodeURIComponent(result); // 格式化数据
18. var aa = $("<a></a>").text("下载数据"); // 创建<a>标签
19. aa.attr('href', data); // 给<a>标签添加href属性
20. aa.attr('download', 'data.csv'); // 给<a>标签创建download属性
21. $("#download").append(aa); // 插入标签
22. </script>