欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
前端JS实现有样式的Excel导出
2017-09-26 10:39:31   来源:博主个人总结   评论:0 点击:
前端JS实现有样式的Excel导出
这段时间一直写的是华为的电信,移动大屏可视化项目。对数据的处理要求比较高,其中遇到一个问题就是客户需要导出前台展示table表中的内容,之前一直是后台给接口,调用接口后台做导出功能的,但现在考虑到安全的问题,需要由前台来做,于是博主研究了一波。嘿嘿,JS还是那么强大,不仅可以导出表格,我们换可以自定义我们导出表格的样式,下面是我写的一个方法,供大家参考:
 
function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    console.log(arrData)
    var excel = '<table>';
    var row = "<tr>";
    for (var i = 0, l = ShowLabel.length; i < l; i++) {
        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]) {
            console.log(arrData[i][index]);
            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 += "{"+FileName+"}";
    excelFile += "</x:Name>";
    excelFile += "<x:WorksheetOptions>";
    excelFile += "<x:DisplayGridlines/>";
    excelFile += "</x:WorksheetOptions>";
    excelFile += "</x:ExcelWorksheet>";
    excelFile += "</x:ExcelWorksheets>";
    excelFile += "</x:ExcelWorkbook>";
    excelFile += "</xml>";
    excelFile +=' <style type="text/css">' +
    'table td {' +
    'border: 1px solid #000000;' +
    'width: 200px;' +
    'height: 30px;' +
    ' text-align: center;' +
    'background-color: #4f891e;' +
    'color: #ffffff;' +
    ' }' +
    '</style>'
    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);
}
 
自定义样式我写在了生成表格的Xml里面,在这里面我们可以自定义我们想要的表格表头的样式,表格body的样式,有需要博主写的demo源码的点击下载 密码:6bfg 

相关热词搜索:前端 Excel 样式

上一篇:Webpack使用指南
下一篇:css边框边框的组成

收藏