<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="public/javascript/jquery-1.11.3.min.js"></script>

</head>

<body>

<div class='mydiv'>

    <textarea id="txt" class='txtarea'> [

  {

    "login_time": "19720",

    "user_id": "296480061832316496"

  }

]</textarea>

    <button class='gen_btn'>Generate File</button>

</div>

<script>

    $(document).ready(function(){

        $('button').click(function(){

            var data = $('#txt').val();

            if(data == '')

                return;

            JSONToCSVConvertor(data, "Vehicle Report", true);

        });

    });

    function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {

        //If JSONData is not an object then JSON.parse will parse the JSON string in an Object

        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

        var CSV = '';

        //Set Report title in first row or line

        CSV += ReportTitle + '\r\n\n';

        //This condition will generate the Label/Header

        if (ShowLabel) {

            var row = "";

            //This loop will extract the label from 1st index of on array

            for (var index in arrData[0]) {

                //Now convert each value to string and comma-seprated

                row += index + ',';

            }

            row = row.slice(0, -1);

            //append Label row with line break

            CSV += row + '\r\n';

        }

        //1st loop is to extract each row

        for (var i = 0; i < arrData.length; i++) {

            var row = "";

            //2nd loop will extract each column and convert it in string comma-seprated

            for (var index in arrData[i]) {

                row += '"' + arrData[i][index] + "" + '",';

            }

            row.slice(0, row.length - 1);

            //add a line break after each row

            CSV += row + '\r\n';

        }

        if (CSV == '') {

            alert("Invalid data");

            return;

        }

        //Generate a file name

        var fileName = "MyReport_";

        //this will remove the blank-spaces from the title and replace it with an underscore

        fileName += ReportTitle.replace(/ /g,"_");

        //Initialize file format you want csv or xls

        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

        // Now the little tricky part.

        // you can use either>> window.open(uri);

        // but this will not work in some browsers

        // or you will not get the correct file extension

        //this trick will generate a temp <a /> tag

        var link = document.createElement("a");

        link.href = uri;

        //set the visibility hidden so it will not effect on your web-layout

        link.style = "visibility:hidden";

        link.download = fileName + ".csv";

        //this part will append the anchor tag and remove it after automatic click

        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);

    }

</script>

</body>

</html>

转自：http://jsfiddle.net/hybrid13i/JXrwM/

网页端，JSON导成CSV文件的更多相关文章

  1. python json格式和csv文件转换

    python json格式和csv文件转换 上代码 import csv import json ''' json格式示例 [{ "firstName":"Bill&qu ...

  2. 将DataTable转换成CSV文件

    DataTable用于在.net项目中,用于缓存数据,DataTable表示内存中数据的一个表.CSV文件最早用在简单的数据库里,由于其格式简单,并具备很强的开放性,所以起初被扫图家用作自己图集的标记 ...

  3. PHP Apache Access Log 分析工具 拆分字段成CSV文件并插入Mysql数据库分析

    现在需要分析访问日志,怎么办? 比如分析D:\Servers\Apache2.2\logs\access2014-05-22.log http://my.oschina.net/cart/针对这个问题 ...

  4. 转换成CSV文件、Word、Excel、PDF等的方法--读取CSV文件的方法

    1. 转换成CSV文件: http://www.dotnetgallery.com/lab/resource93-Export-to-CSV-file-from-Data-Table-in-Aspne ...

  5. Python爬虫小实践：寻找失踪人口，爬取失踪儿童信息并写成csv文件，方便存入数据库

    前两天有人私信我,让我爬这个网站,http://bbs.baobeihuijia.com/forum-191-1.html上的失踪儿童信息,准备根据失踪儿童的失踪时的地理位置来更好的寻找失踪儿童,这种 ...

  6. 彻底理解使用JavaScript 将Json数据导出CSV文件

    前言 将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理 首先在本地用Excel ...

  7. mysql多表查询，group by并将结果导出来csv文件

    SQL手动操作得少,遇到一个CASE,就记录一个CASE吧. 今天遇到的是统计一个发布结果. 这个发布表中,有两个字段是外键,并且要求按其中一个外键,作group by操作, 最后,导出来excel能 ...

  8. OGG到OGGAdapter配置详情-从Oracle直接抽取成csv文件

    Oracle Golden Gate是Oracle旗下一款支持异构平台之间高级复制技术,是Oracle力推一种HA高可用产品,简称“OGG”,可以实现Active-Active 双业务中心架构 1.1 ...

  9. vue.js纯前端处理如何将后台返回来的csv数据导出成csv文件

    需要实现一个下载csv文件的功能,但后台没有对这个下载文件进行处理,而是将csv数据传给前台而已,需要前台做一下处理. 这是按钮的代码: <a> <el-button size=&q ...

随机推荐

  1. python 解析top文件格式

    top - 16:14:35 up 2 days, 3:04, 7 users, load average: 2.22, 1.84, 1.77 Tasks: 512 total, 2 running, ...

  2. Aerospike系列：3：aerospike特点分析

    1. 数据存放 数据可以放内存,也可以放SSD.   数据放内存时速度肯定会很快,但这和memcache一样,相比memcache性能并没有优势 数据放内存时可以进行持久化配置,但文档只有一个地方提了 ...

  3. RN API备忘

    1:Alert:启动一个提示对话框,包含对应的标题和信息. 2:Animated:动画效果. 3:AppRegistry:React Native应用的入口.应用的根组件应当通过AppRegistry ...

  4. 结合JSFL/actionscript 实现轮廓动画

    动画前半段通过JSFL获取轮廓数据,并在EnterFrame中逐个边缘画出的:后半段机枪动画是美术做好的flash动画. 这里只放出actionscript代码,而JSFL代码涉及到一个工程,暂时保密 ...

  5. Oracle NET工作原理、配置及连接问题排查

    一.Oracle NET配置文件 Oracle NET是一个软件层,支持不同网络协议之间的转换.不同的物理机器可以借助这个软件层实现相互间的通信,具体而言就是实现对oracle的远程访问. oracl ...

  6. Xcode7安装CocoaPods

    一.CocoaPods介绍以及优点 CocoaPods 是开发 OS X 和 iOS 应用程序的一个第三方库的依赖管理工具.该项目源代码在Github上管理. 通过 CocoaPods,能够非常方便的 ...

  7. 一种通过MQ使缓存和数据库同步的玩法

    其他相关玩法 可以搜索 mysql 和 redis 结合使用

  8. Light OJ 1406 Assassin`s Creed 状态压缩DP+强连通缩点+最小路径覆盖

    题目来源:Light OJ 1406 Assassin`s Creed 题意:有向图 派出最少的人经过全部的城市 而且每一个人不能走别人走过的地方 思路:最少的的人能够走全然图 明显是最小路径覆盖问题 ...

  9. 使用perf + FlameGraph生成进程火焰图

    FlameGraph代码:https://github.com/cobblau/FlameGraph 使用方法 1,perf record --call-graph dwarf -p 12345 2, ...

  10. [转]图解分布式一致性协议Paxos

    Paxos协议/算法是分布式系统中比较重要的协议,它有多重要呢? <分布式系统的事务处理>: Google Chubby的作者MikeBurrows说过这个世界上只有一种一致性算法,那就是 ...