<!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. vim 窗口操作:多tab|窗口拆分

    转 我是一个vimer,还在用着这个上古时代的编辑器,但我并不是守旧派,因为即使是 现在,vim也在不断的创新.我用vim也有一两年的光景了,但是我还是不敢我自己 精通vim,当然我使用vim基本是两 ...

  2. 将ASP.NET用户控件转化为自定义控件

    将ASP.NET用户控件转化为自定义控件 作者:Kevin Cheng (程建和) 最后修改时间:2006-03-14 概述:如何将ASP.NET用户控件移植为ASP.NET自定义控件 关键字:Asp ...

  3. pycharm安装提示 module 'pip' has no attribute 'main'

    问题描述: 环境: windows10 pycharm2016.2.3  //在最先版本的pycharm就没问题,可能还需要升级pip版本 python3.6 pip安装模块,提示 Attribute ...

  4. Android中为图标加上数字

    Android中为图标加上数字--用于未读短信数提醒,待更新应用数提醒等 http://flysnow.iteye.com/blog/906770

  5. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

  6. Redis-Redi事务注意事项

    当客户端处于非事务状态下时, 所有发送给服务器端的命令都会立即被服务器执行.但是, 当客户端进入事务状态之后, 服务器在收到来自客户端的命令时, 不会立即执行命令, 而是将这些命令全部放进一个事务队列 ...

  7. spring下Junit_jdbc回滚demo

    配置测试类 添加如下内容在class前,用于配置applicationContext.xml文件的位置. @RunWith(SpringJUnit4ClassRunner.class) @Contex ...

  8. ubuntu设置自动关机

    windows可以设置自动关机时间.那么ubuntu的命令是什么呢?   首先要能拿到sudo权限,还好我是在home下编译的,一路上都不用sudo,因此可以把sudo给shutdown了.呵呵   ...

  9. HDUOJ-----Computer Transformation

    Computer Transformation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  10. 使用Servlet发布WebService

    首先感谢熔岩的文章: http://lavasoft.blog.51cto.com/62575/227988 1.Eclipse安装上tomcat插件,http://www.eclipsetotale ...