使用javascript实现json数据以csv格式下载
更新时间：2015年01月09日 10:43:58 投稿：hebedich
这篇文章主要介绍了使用javascript实现json数据以csv格式下载,需要的朋友可以参考下
摘要：
最近有一个非项目的小需求，就是将项目开发分工文件化，方便后期管理维护。但是开发时，分工安排都是以json格式记录的，所以就做了一个将json数据以csv格式下载到本地。
代码：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<title>download csv</title>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="download.js"></script>
</head>
<body>
<div align="center">
<h3><u>Enter JSON data</u></h3>
<div class='mydiv'>
<textarea id="txt" class='txtarea' rows="15" cols="100">[{"Vehicle":"BMW","Date":"30 Jul 2013 09:24 AM","Location":"Hauz Khas","Speed":42},{"Vehicle":"Honda CBR","Date":"30 Jul 2013 12:00 AM","Location":"Military Road","Speed":0},{"Vehicle":"Supra","Date":"30 Jul 2013 07:53 AM","Location":"Sec-45","Speed":58},{"Vehicle":"Land Cruiser","Date":"30 Jul 2013 09:35 AM","Location":"DLF Phase I","Speed":83}]</textarea>
</div>
<br/>
<button class="download">Download CSV</button>
</div>
</body>
</html>
download.js
复制代码 代码如下:
$(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();
});
小结：
注意json格式[{},{}]，文件名是在js中定义的变量fileName。主要问题是他会自动添加一行空行，且每个元素都会在值前面加个'='。
下载下来的数据格式为：
相关文章
这篇文章主要介绍了JavaScript基于数组实现的栈与队列操作,结合实例形式分析了栈与队列的操作原理及javascript使用数组实现栈与队列的相关技巧,需要的朋友可以参考下2018-12-12
有时在显示某段文字的时候,可能会太长,影响我们页面的显示效果,如果仅是英文,那么我们可以用String.substring(start, end)函数就已经够用了,但是通常我们都会遇到既有英文,又有汉字的情况2013-04-04
这篇文章主要介绍了JavaScript面向对象之私有静态变量,结合实例形式分析了私有静态变量的定义与使用方法,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
说实话，对于js初学者的我来说。这个东西太吓人了，在这些JS库中，这个函数基本上把整个库的所有代码全括起来了，这种写法完全超越了我的常识。2010-06-06
这篇文章主要介绍了使用Visual Studio 2022开发前端,在浏览器中可以使用CDN源引用需要的客户端库，可如果在企业内网使用，无法访问CDN源时，需要将客户端库下载到本地使用，需要的朋友可以参考下2022-05-05
跟我学习javascript的函数和构造函数调用，主要包括三方面内容函数调用、方法调用以及构造函数调用，想要了解这些内容的朋友千万不要错过下面的内容。2015-11-11
这篇文章主要为大家详细介绍了js实现放大镜效果的思路与代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了移动端JS实现拖拽两种方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
今天小编就为大家分享一篇对layer弹出框中icon数字参数的说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论