網頁json數據轉換成csv數據並提供下載鏈接

前言

數據相關網站有時需要提供數據下載鏈接，以便於用戶下載數據。網頁上嘗試用json數據，但是用戶

環境

• Windows10
• jquery2.1.4

方法

1. HTML文件中加入下載標籤
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, 下載後導入庫
3. <script src="/static/js/json2csv.js" type="text/javascript"></script>
4. json數據轉cvs並生成下載鏈接
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>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！