使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載
更新時(shí)間：2015年01月09日 10:43:58 投稿：hebedich
這篇文章主要介紹了使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載,需要的朋友可以參考下
摘要：
最近有一個(gè)非項(xiàng)目的小需求，就是將項(xiàng)目開(kāi)發(fā)分工文件化，方便后期管理維護(hù)。但是開(kāi)發(fā)時(shí)，分工安排都是以json格式記錄的，所以就做了一個(gè)將json數(shù)據(jù)以csv格式下載到本地。
代碼：
復(fù)制代碼 代碼如下:
download.js
復(fù)制代碼 代碼如下:
$(document).ready(function() {
"use strict";
var mo = {
init: function() {
$('.download').click(function() {
var data = $('#txt').val();
if (data === '') {
return;
}
mo.JSONToCSVConvertor(data, true);
});
},
JSONToCSVConvertor: function(JSONData, ShowLabel) {
var arrData = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
if (ShowLabel) {
var row = "";
for (var index in arrData[0]) {
row += index + ',';
}
row = row.slice(0, -1);
CSV += row + '\r\n';
}
for (var i = 0; i < arrData.length; i++) {
var row = "";
for (var index in arrData[i]) {
var arrValue = arrData[i][index] == null ? "" : '="' + arrData[i][index] + '"';
row += arrValue + ',';
}
row.slice(0, row.length - 1);
CSV += row + '\r\n';
}
if (CSV == '') {
growl.error("Invalid data");
return;
}
var fileName = "Result";
if (mo.msieversion()) {
var IEwindow = window.open();
IEwindow.document.write('sep=,\r\n' + CSV);
IEwindow.document.close();
IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
IEwindow.close();
} else {
var uri = 'data:application/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
},
msieversion: function() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
return true;
} else { // If another browser,
return false;
}
return false;
},
main: function() {
mo.init();
}
};
mo.main();
});
小結(jié)：
注意json格式[{},{}]，文件名是在js中定義的變量fileName。主要問(wèn)題是他會(huì)自動(dòng)添加一行空行，且每個(gè)元素都會(huì)在值前面加個(gè)'='。
下載下來(lái)的數(shù)據(jù)格式為：
相關(guān)文章
這篇文章主要介紹了JavaScript中如何計(jì)算字符串文本的寬度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
微信小程序?qū)崿F(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
JS如何實(shí)現(xiàn)基于websocket的多端橋接平臺(tái)
我們?cè)谡{(diào)試過(guò)程使用的工具有：modheader,postman等，但這些工具都會(huì)存在的問(wèn)題：缺少客戶端里相應(yīng)的設(shè)備信息；即使將cookie信息復(fù)制出來(lái)，也是存在過(guò)期的問(wèn)題；多個(gè)設(shè)備之間切換時(shí)不方便；針對(duì)這些存在的問(wèn)題，我基于websocket雙向通信的特點(diǎn)，實(shí)現(xiàn)了多端橋接管理平臺(tái)2021-05-05
通過(guò)jQuery學(xué)習(xí)js類型判斷的技巧
這篇文章主要介紹了通過(guò)jQuery學(xué)習(xí)js類型判斷的技巧，下面和小編一起來(lái)學(xué)習(xí)一下吧2019-05-05
javascript 原型模式實(shí)現(xiàn)OOP的再研究
目前網(wǎng)絡(luò)上有關(guān)javascript實(shí)現(xiàn)OOP模式的方案基本上都是prototype模式，一般性的示例代碼如下2009-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片輪播，左右翻轉(zhuǎn)，圖片切換顯示等效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
js中async函數(shù)結(jié)合promise的小案例淺析
這篇文章主要介紹了js中async函數(shù)結(jié)合promise的小案例淺析，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
你在?JavaScript?代碼編寫(xiě)中有遇到過(guò)一個(gè)你需要比較或操作處理字符串,但是在開(kāi)始或者結(jié)尾有額外空格的情況嗎？在這篇博客中,我將給你展示如何使用不同的方法在?JavaScript?中修剪字符串,需要的朋友可以參考下2024-02-02
有趣的JavaScript隱式類型轉(zhuǎn)換操作實(shí)例分析
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換操作,結(jié)合實(shí)例形式分析了JavaScript隱式類型轉(zhuǎn)換操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07