使用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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
使用angular写一个hello world
Jan 23 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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数组索引与键值操作技巧实例分析
2015/06/24 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
销售经理工作职责范文
2013/12/03 职场文书
考试不及格的检讨书
2014/01/22 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
给领导的感谢信范文
2015/01/23 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技