JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

<html>

<head>

</head>

<body>



<script type="text/javascript">



function jsexport(){

    var jsonData = [{name:"张三", sex:"男", age:46},{name:"李四", sex:"男", age:20},{name:"王五", sex:"男", age:33},{name:"赵六", sex:"男", age:80}];

   

    var GridData = JSON.parse(JSON.stringify(jsonData))

    JSONToCSV(GridData, "UserReport.csv", true);

}



var blob;

var filename;

function c(){

window.navigator.msSaveOrOpenBlob(blob, filename);

}



function JSONToCSV(JSONData, ReportName, 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]) {

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

        }

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

        //add a line break after each row

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

console.log(CSV);

    }





    if (CSV == '') {        

        alert("数据有错误");

        return;

    }   

    

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

    link.id="lnkDwnldLnk";

link.name="lnkDwnldLnk";

link.setAttribute("style", "display:none");





    var ifdo = document.createElement("iframe");    

    ifdo.id="ifdiframe";

ifdo.name="ifdiframe";

ifdo.setAttribute("style", "display:none");

    

    document.body.appendChild(link);

document.body.appendChild(ifdo);

   

var csv = CSV;


try

{

blob = new Blob([csv], { type: 'text/txt' }); 

}

catch (e)

{

blob = [csv];

}



var csvUrl = "";

filename = ReportName;

    if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) { 

        csvUrl = window.webkitURL.createObjectURL(blob); 

link.setAttribute("download", filename);

link.setAttribute("href", csvUrl);

link.click();

    } 

    if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 

        csvUrl = window.URL.createObjectURL(blob); 

link.setAttribute("download", filename);

link.setAttribute("href", csvUrl);

link.click();

    } 

    else { 

if(window.navigator.msSaveOrOpenBlob) { //IE>=10

link.addEventListener('click', function() {

window.navigator.msSaveOrOpenBlob(blob, filename);

});

link.click();





        } else { //支持IE9、IE8;  IE7及以下暂不支持，因为不支持JSON

            var ifd = document.getElementById('ifdiframe').contentDocument;

ifd.open('text/plain', 'replace');

ifd.write('\r\n\r\n' + csv);

ifd.close();

ifd.execCommand('SaveAs', null, filename);

        }

    }

  

    document.body.removeChild(link);

document.body.removeChild(ifdo);

}



</script>

<input type="Button" id="bygen" value="导出" onclick="jsexport()"/ >



<br>

<a id="mydownload" name="mydownload" href="#" >导出</a>



</html>

纯原生js代码，本人原创，未经许可可随意转载

JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox的更多相关文章

  1. Json数据导出生成Excel

    最近在做一个导入导出Excel的功能,导出其他类型的文件都比较熟悉,但是导入跟导出一个Excel还是稍微特殊点.根据这次的经验,写了个导出的小样例. 总体思路就是json数据的key,value跟Ex ...

  2. C#大量数据导出到Excel(转)

    工作过程中经常会用到将数据导出到Excel中,一般情况下需要导出的数据都是几百几千条或者上万条,这都没有什么问题,但有时候会遇到特殊的需求,客户要求把几十万条甚至上百万条的数据导出到Excel中,这就 ...

  3. 使用js在页面上新建文件夹

    使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  5. js如何把字符串转换成json数据的方法

    js如何把字符串转换成json数据的方法 function strtojson(str){ var json = eval('(' + str + ')'); return json; } 方法二 f ...

  6. Nginx下HTML页面POST请求静态JSON数据返回405状态

    在浏览器访问HTML页面,发现一些静态JSON数据没有显示,F12查看,如下图所示: 可以看到请求方式为POST 将请求链接复制在浏览器地址栏访问,可以正常请求到数据 F12查看,可以看到请求方式为G ...

  7. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  8. json数据导出excel

    最近做的一个项目涉及到把数据导出到excel里面,网上找来找去,最终找到两种办法,废话不多说了 第一种: 拿到表格的id就可以抓取表格的数据,导出到excel,这种方式简单粗暴,引入这两个插件即可. ...

  9. asp.net 将repeater上数据导出到excel

    1,首先得到一个DataTable public DataTable GetTable(string sql) { SqlConnnection con=new SqlConnection(Confi ...

随机推荐

  1. PLSQL Developer对oracle中的数据进行备份恢复

    1.备份数据结构 --进入  工具-->导出用户对象  如图所示 把包括所有者的√去掉,到时候我们就可以随便建一个用户导入数据了,不一定非要scott用户   2.备份数据 工具-->导出 ...

  2. C++STL deque

    deque双端数组 deque<int> dq; deque<int>::iterator it; dq.push_back();//尾部插入元素 dq.push_front( ...

  3. BT656与BT1120的区别

      从ITU-R BT1120文档上可知,BT1120支持的是1080p: 文档定义一帧为1 125 总行数和1 080 有效行:每行有效像素为1920图像频率60. 50. 30. 25 和 24H ...

  4. java混淆代码的使用

    前言:为了保护我们的劳动成果,我们来学习java混淆代码工具的使用. 1.下载retroguard.jar 进入http://www.retrologic.com/retroguard-downloa ...

  5. noip第1课作业

    1.    求三个数的乘积和三次方和 [问题描述] 编程实现输入任意三个整数a, b, c,将这三个数的乘积以及三次方和输出: [样例输入] 1 2 3 [样例输出] 6 36 #include &l ...

  6. 最长上升子序列 and 最长公共子序列 问题模板

    两种求最长上升子序列问题 第一种:定义dp[i]=以a[i]为末尾的最长上升子序列问题的长度 第二种:定义dp[i]=长度为i+1的上升 子序列 中末尾元素的最小值 #include <cstd ...

  7. hdu 4923 单调栈

    http://acm.hdu.edu.cn/showproblem.php?pid=4923 给定一个序列a,元素由0,1组成,求一个序列b,元素在0~1之间,并且保证递增.输出最小的∑(ai−bi) ...

  8. PCI总线目标接口状态机设计

    module state_machine (devsel_l, trdy_l, stop_l, pci_ad_oe,      dts_oe, par_oe, bk_oe, pci_ad_en, hi ...

  9. 七种bond模式说明

    第一种模式:mod=0 ,即:(balance-rr) Round-robin policy(平衡抡循环策略) 特点:传输数据包顺序是依次传输(即:第1个包走eth0,下一个包就走eth1….一直循环 ...

  10. 7.Git与项目

    Git简介 Git是目前世界上最先进的分布式版本控制系统 安装 sudo apt-get install git 安装成功后,运行如下命令 git 产生 Linus在1991年创建了开源的Linux, ...