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

2023-06-25,,

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的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。