摘要：

　　最近有一个非项目的小需求，就是将项目开发分工文件化，方便后期管理维护。但是开发时，分工安排都是以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。主要问题是他会自动添加一行空行，且每个元素都会在值前面加个'='。

下载下来的数据格式为：

js将json数据以csv格式下载的更多相关文章

  1. python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求

    一.JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  2. flink---实时项目----day03---1.练习讲解（全局参数，数据以parquet格式写入hdfs中） 2 异步查询 3 BroadcastState

    1 练习讲解(此处自己没跑通,以后debug) 题目见flink---实时项目---day02 kafka中的数据,见day02的文档 GeoUtils package cn._51doit.flin ...

  3. python实现将json数据以json格式写入txt文件

    json.dumps中indent参数是设置json缩进量的 举例: tmp = { "aaa" : "111", "bbb" : '222 ...

  4. Js -----后台json数据，前端生成下载text文件

    需要引入 <script src="/assets/libs/single_file/jquery.min.js"></script> <script ...

  5. 把HDFS里的json数据转换成csv格式

      1. 全景图 2. 用ListHDFS获取所有文件名   如果想重新再取一次,右健view state:   点击 clear state, 再运行,即可再次采集数据了.   3. 用FetchH ...

  6. C#将数据以XML格式写入Excel

    本文转载:http://www.cnblogs.com/eflylab/archive/2008/09/21/1295580.html c#将数据导入Excel另类方法 今天公司突然给个Excel模版 ...

  7. JS将JSON日期转换为指定格式的日期

    1.引入JS日期转换的函数库 function Format(now,mask) { var d = now; var zeroize = function (value, length) { if ...

  8. node转发请求 .csv格式文件下载 中文乱码问题 + 文件上传笔记

    用户无法直接访问后台接口 需要node端转发请求 并将数据以.csv文件格式生成以供客户端下载. 很不幸出现了中文乱码的问题 挖了各种坟帖,下了各种依赖包,csv.json2csv.bufferHel ...

  9. OAF_文件系列2_实现OAF导出CSV格式文件ExportButton（案例）

    20150727 Created By BaoXinjian

随机推荐

  1. am335x u-boot2011.09 SPL 流程跟踪

    跟踪一下 u-boot 2011.09 MLO在 nandflash 下运行的流程 首先,直接进入 start.S // arch/arm/cpu/armv7/start.S 36 .globl _s ...

  2. Android——开源框架Universal-Image-Loader + Fragment使用+轮播广告

    原文地址: Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用 Android 开源框架Universal-Image-Loader完全解析(二) ...

  3. table中超过长度的列，显示省略号

    <style type="text/css"> .table-ellipsis { table-layout: fixed; width: 100%; } .table ...

  4. MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步，解决主从复制延迟问题！

    MySQL 5.7主从复制从零开始设置及全面详解——实现多线程并行同步,解决主从复制延迟问题!2017年06月15日 19:59:44 蓝色-鸢尾 阅读数:2062版权声明:本文为博主原创文章,如需转 ...

  5. JS实现IE下打印和打印预览

    http://blog.csdn.net/rongyongfeikai2/article/details/8460598 ——————————————————————————————————————— ...

  6. R语言如何将字符串转变为命令执行

    这里用到 eval() 和 parse() 函数.首先使用 parse() 函数将字符串转化为表达式(expression),而后使用 eval() 函数对表达式求解.x <- 1:10a &l ...

  7. 关于Unity中Mecanim动画的重定向与动画混合

    应用 一个RPG游戏,里面有100种怪物,每种怪物其实都差不多的,行走,跳跃,攻击,难道动画师要调100次动画吗?其实不需要 Unity抽象出人形动画系统,用Unity简化版的骨骼来进行统一的管理,只 ...

  8. 【Python】python3.6 操作mysql

    1.首先安装mysqldb 下载 mysqldb 使用命令 pip3 install mysqlclient-1.3.12-cp36-cp36m-win32.whl 下载地址: mysqlclient ...

  9. qualcomm 查看 wifi 配置生效

    iwpriv wlan0 getConfig 然后收集dmesg, 或者执行这条命令: dmesg | grep gEnableBmps

  10. PhotoshopCS6常用快捷键速查

    写此文的起因:这学期开了一门多媒体技术课程,主要学习Photoshop软件的操作和使用,发觉该软件异常强大,而且有许多快捷键操作,在学期末时查阅了相关资料,特整理如下,供学习借鉴. 一.工具快捷键 二 ...