几种前端json导出excel方法

时间：2024-02-22 08:23:40

第一种导出excel无需自己设置，直接根据json生成 （缺点：json数据全部展示，且只能按获取数据的顺序显示）

//json数据转excel
    function JSONToExcelConvertor(JSONData, FileName) {
        //先转化json
        var arrData = typeof JSONData != \'object\' ? JSON.parse(JSONData) : JSONData;
        var excel = \'<table>\';
        var row = "<tr>";
        //设置表头
        var keys = Object.keys(JSONData[0]);
        keys.forEach(function (item) {
            row += "<td>" + item + \'</td>\';
        });
        //换行
        excel += row + "</tr>";
        //设置数据
        for (var i = 0; i < arrData.length; i++) {
            var row = "<tr>";
            for (var index in arrData[i]) {
                console.log(arrData[i][index]);
                //var value = arrData[i][index] === "." ? "" : arrData[i][index];
                row += \'<td>\' + arrData[i][index] + \'</td>\';
            }
            excel += row + "</tr>";
        }

        excel += "</table>";

        var excelFile = "<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:x=\'urn:schemas-microsoft-com:office:excel\' xmlns=\'http://www.w3.org/TR/REC-html40\'>";
        excelFile += \'<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">\';
        excelFile += \'<meta http-equiv="content-type" content="application/vnd.ms-excel\';
        excelFile += \'; charset=UTF-8">\';
        excelFile += "<head>";
        excelFile += "<!--[if gte mso 9]>";
        excelFile += "<xml>";
        excelFile += "<x:ExcelWorkbook>";
        excelFile += "<x:ExcelWorksheets>";
        excelFile += "<x:ExcelWorksheet>";
        excelFile += "<x:Name>";
        excelFile += "{worksheet}";
        excelFile += "</x:Name>";
        excelFile += "<x:WorksheetOptions>";
        excelFile += "<x:DisplayGridlines/>";
        excelFile += "</x:WorksheetOptions>";
        excelFile += "</x:ExcelWorksheet>";
        excelFile += "</x:ExcelWorksheets>";
        excelFile += "</x:ExcelWorkbook>";
        excelFile += "</xml>";
        excelFile += "<![endif]-->";
        excelFile += "</head>";
        excelFile += "<body>";
        excelFile += excel;
        excelFile += "</body>";
        excelFile += "</html>";

        var uri = \'data:application/vnd.ms-excel;charset=utf-8,\' + encodeURIComponent(excelFile);

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

        link.style = "visibility:hidden";
        link.download = FileName + ".xls";

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

 

第二种json排序，可手动设置数据显示(缺点：无法对列间距进行设置，生成的excel会挤在一起)

//导出访问路径Excel
    function exportPathMethod(data) {
        //要导出的json数据
        var jsonData = [];
        for(var i=0; i<data.length ; i++){
            jsonData.push({
                index :i+1,
                title: data[i].title,
                url: data[i].url,
                createTime :data[i].createTime
            });
        }

        //列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `序号,标题,地址,时间\n`;
        //增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(let item in jsonData[i]){
                str+=`${jsonData[i][item] + \'\t\'},`;
            }
            str+=\'\n\';
        }

        //encodeURIComponent解决中文乱码
        let uri = \'data:text/csv;charset=utf-8,\ufeff\' + encodeURIComponent(str);
        //通过创建a标签实现
        var link = document.createElement("a");
        link.href = uri;
        //对下载的文件命名
        link.download =  "json数据表.xls";
        document.body.appendChild(link);
        link.click();
    }

 

 第三种方法 是为了解决返回的json数据中一些数据不想展示给用户时采取的措施（转载：https://blog.csdn.net/qq_34623560/article/details/79928248）

<html>  
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">  
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="js/JSONToExcelConvertor.js" ></script>

    <script type="text/javascript">  
        $(document).ready(function(){  
            $(\'#wwo\').click(function(){  
                //测试的json数据
                var data3=[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24},
                {"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58} ,
                {"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77}]

                //自定义标题栏
                var title=[\'用户名\',\'性别\',\'城市\',\'签名\',\'经验\']  
                //自定义过滤栏（不需要导出的行）
                var filter=[\'id\',\'logins\']               

                //原始导出
                JSONToExcelConvertor(data3,"report"); 
                //自定义导出
                //JSONToExcelConvertor(data3,"report",title,filter);
            });  
        });     
    </script>  
</head>  
<body>  
    <input type="button" id="wwo" value="导出" />  
</body>  
</html>  

function JSONToExcelConvertor(JSONData, FileName,title,filter) {  
    if(!JSONData)
        return;
    //转化json为object
    var arrData = typeof JSONData != \'object\' ? JSON.parse(JSONData) : JSONData;  

    var excel = "<table>";      

    //设置表头  
    var row = "<tr>";  

    if(title)
    {
        //使用标题项
        for (var i in title) {  
            row += "<th align=\'center\'>" + title[i] + \'</th>\';
        }  

    }
    else{
        //不使用标题项
        for (var i in arrData[0]) {  
            row += "<th align=\'center\'>" + i + \'</th>\';
        } 
     }

        excel += row + "</tr>";  

    //设置数据  
    for (var i = 0; i < arrData.length; i++) {  
        var row = "<tr>";  

        for (var index in arrData[i]) {
            //判断是否有过滤行
            if(filter)
            {
                if(filter.indexOf(index)==-1)
                {
                     var value = arrData[i][index] == null ? "" : arrData[i][index];  
                     row += \'<td>\' + value + \'</td>\'; 
                } 
            }
            else
            {
                 var value = arrData[i][index] == null ? "" : arrData[i][index];  
                 row += "<td align=\'center\'>" + value + "</td>"; 
            }    
        }  

        excel += row + "</tr>";  
            }  

            excel += "</table>";  

            var excelFile = "<html xmlns:o=\'urn:schemas-microsoft-com:office:office\' xmlns:x=\'urn:schemas-microsoft-com:office:excel\' xmlns=\'http://www.w3.org/TR/REC-html40\'>";  
    excelFile += \'<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">\';  
    excelFile += \'<meta http-equiv="content-type" content="application/vnd.ms-excel\';  
    excelFile += \'; charset=UTF-8">\';  
    excelFile += "<head>";  
    excelFile += "<!--[if gte mso 9]>";  
    excelFile += "<xml>";  
    excelFile += "<x:ExcelWorkbook>";  
    excelFile += "<x:ExcelWorksheets>";  
    excelFile += "<x:ExcelWorksheet>";  
    excelFile += "<x:Name>";  
    excelFile += "{worksheet}";  
    excelFile += "</x:Name>";  
    excelFile += "<x:WorksheetOptions>";  
    excelFile += "<x:DisplayGridlines/>";  
    excelFile += "</x:WorksheetOptions>";  
    excelFile += "</x:ExcelWorksheet>";  
    excelFile += "</x:ExcelWorksheets>";  
    excelFile += "</x:ExcelWorkbook>";  
    excelFile += "</xml>";  
    excelFile += "<![endif]-->";  
    excelFile += "</head>";  
    excelFile += "<body>";  
    excelFile += excel;  
    excelFile += "</body>";  
    excelFile += "</html>";  


    var uri = \'data:application/vnd.ms-excel;charset=utf-8,\' + encodeURIComponent(excelFile);  

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

    link.style = "visibility:hidden";  
    link.download = FileName + ".xls";  

    document.body.appendChild(link);  
    link.click();  
    document.body.removeChild(link);  
}

再次简化：终极简化导出excel（一万条数据可在10秒内导出）

 //json数据转excel
    function JSONToOrderExcelConvertor(JSONData) {
        var str = \'序号,订单号,订单时间,主要用途,客户名称,电话,产品型号,是否形成有效线索\n\';

        for(let i=0;i<JSONData.length;i++){
            var result =\'\';
            if (JSONData[i].orderStatusc==\'0\'){
                result="是";
            } else {
                result="否";
            }
            str += (i+1).toString()+\',\'+JSONData[i].orderId+\'\t\'+\',\'+formateOrderTime(JSONData[i].orderTime)+\'\t\'+\',\'+JSONData[i].p1+\'\t\'+\',\'+JSONData[i].userName+\'\t\'+\',\'+JSONData[i].recMobile+\'\t\'+\',\'+JSONData[i].productName+\'\t\'+\',\'+result+\'\t\'+\',\n\'

        }
        var blob = new Blob([str], {type: "text/plain;charset=utf-8"});
        //解决中文乱码问题
        blob =  new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
        object_url = window.URL.createObjectURL(blob);
        var link = document.createElement("a");
        link.href = object_url;
        link.download =  "导出订单.xls";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

 

第四种、使用插件导出js

引入js

<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
    function JsonToExcel(jsonData,fileName,sheetName,sheetHeader) {
        var option = {};
        option.fileName = fileName;
        option.datas = [
            {
                sheetData : jsonData,
                sheetName : sheetName,
                sheetHeader : sheetHeader
            }
        ];
        var toExcel=new ExportJsonExcel(option);
        toExcel.saveExcel();
    }

由于使用nginx ，数据量超过俩万条时，请求时间超出nginx要求的响应时间就会报504 链接超时

相关文章