使用javascript实现json数据以csv格式下载


Posted in Javascript onJanuary 09, 2015

摘要:

最近有一个非项目的小需求,就是将项目开发分工文件化,方便后期管理维护。但是开发时,分工安排都是以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实现json数据以csv格式下载

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
js读取csv文件并使用json显示出来
Jan 09 #Javascript
微信JS接口汇总及使用详解
Jan 09 #Javascript
推荐一款jQuery插件模板
Jan 09 #Javascript
JavaScript中Cookie操作实例
Jan 09 #Javascript
使用javascript实现简单的选项卡切换
Jan 09 #Javascript
14个有用的Jquery技巧分享
Jan 08 #Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
You might like
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP目录操作实例总结
2016/09/27 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
什么是Web Service?
2012/07/25 面试题
舞蹈毕业生的自我评价
2014/03/05 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
旅游活动总结
2014/08/27 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2015年工会工作总结
2015/03/30 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Node与Python 双向通信的实现代码
2021/07/16 Javascript
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS