前端导出excel表格方法

在日常业务中，有一些没有规律的表格需要导出是，在后端处理会非常麻烦，我们可以把数据提取到html table标签中，然后进行导出

代码如下：

//前端导出excel表格
function ExcelConvertor(data, FileName) {
    if (FileName == null) {
        FileName = "下载文件";
    }
    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 += "worksheet1";
    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 += data;
    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);
}

使用场景：

<div id="show-selected" style="display: none;">
                <h3 style="float:right;">单位：元</h3>
                <cs-table :tablekey="tablekey" :tabledata="tabledata"></cs-table>
 </div>

function Export() {
            var data = $("#show-selected").html();
            ExcelConvertor(data, "文件名");
        }

 

posted @ 2019-11-27 16:51  嗨小灿  阅读(663)  评论(0)  编辑  收藏  举报
Live2D