前端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