使用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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
JQuery实现图片轮播效果
May 08 jQuery
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
Nuxt的路由动画效果案例
Nov 06 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
单位速度在实战中的运用
2020/03/04 星际争霸
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
jquery实现心算练习代码
2010/12/06 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python中hashlib模块用法示例
2017/10/30 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
PHP如何设置和取得Cookie值
2015/06/30 面试题
什么是servlet链?
2014/07/13 面试题
求职简历推荐信范文
2013/12/02 职场文书
入学生会自荐书范文
2014/02/05 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Python3 类型标注支持操作
2021/06/02 Python
实现GO语言对数组切片去重
2022/04/20 Golang