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

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代码,本人原创,未经许可可随意转载

posted @ 2017-06-08 10:50  chinacloudy  阅读(332)  评论(0编辑  收藏  举报