json导出excel（条数受限）

写在前面：因为是后台系统，所有有很多页面都是记录表格，然后想提供一个导出excel的功能，前期实验了bootstrap-table-export和tableExport，但是这些都只能导出本页数据（因为是服务器分页），然后就跟后台讨论了两种实现方式。第一种是我发送请求后由后台生成excel再让我下载，第二种是我发送请求后给我json数据，我来生成excel并下载。第一种的缺点就是后台不知道什么时候回收文件（后台是c语言，以前没做过这种导出功能），第二种就是数据量上万的情况下会不会有什么影响。

使用mock数据测试超过一万条数据的时候会出现下载失败，debug调试发现var excel拼接的table字符串，超出了var的长度限制

接下文：json导出excel(条数不受限)

言归正常

我的思路和方法也是网上查资料看博客来的，不过由于博主的实现感觉不符合json数据的格式，所以我自己改动了一下

JsonExportExcel.min.js

function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
    //先转化json
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var excel = '<table>';    

    //设置表头
    var row = "<tr>";
    for (var i in ShowLabel) {
        row += "<td>" + ShowLabel[i] + '</td>';
    }


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

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

        // for (var index in arrData[i]) {
        //  var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;
        //     row += '<td>' + value + '</td>';
        // }
        for (var index in arrData[i]) {
            var value = arrData[i][index] === "." ? "" : arrData[i][index];
            row += '<td>' + 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);
}

index.html

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/JsonExportExcel.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#wwo').click(function(){
                var data = {
                    "title":{"company":"集团","date":"日期"},
                    "data":[
                            {"company":"腾讯",'date':'2015-08-24'},
                            {"company":"百度",'date':'2015-08-24'}                       
                        ]
                    };
                if(data == '')
                    return;
                JSONToExcelConvertor(data.data, "Report", data.title);
            });
        });


    </script>
</head>
<body>
    <input type="button" id="wwo" value="导出" />
</body>
</html>

实际

地址

演示地址:json导出excel
代码地址：jsonExportExcel(github)

json导出excel（条数受限）

言归正常

实际

地址

猜你喜欢