使用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 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
Oct 05 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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/02/15 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
python函数的万能参数传参详解
2019/07/26 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python timeit模块原理及使用方法
2020/10/10 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
行政部工作岗位职责范本
2014/03/05 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
担保书怎么写 ?
2019/04/22 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python