js导出excel(带边框以及文本样式)

js导出excel

假定有这样一个页面

<div class="content-table">
    <table lay-filter="queryTable"  id="queryTable">
          <colgroup>
             <col width="150">
             <col width="200">
             <col>
          colgroup>
    table>
    <div id="tableData" style="display: none">div>
div>

table 结合layui的table模块(https://www.layui.com/doc/modules/table.html) 动态加载后端数据

考虑到兼容ie

var idTmr;
function  getExplorer() {
    var explorer = navigator.userAgent.toLowerCase() ;
    //ie
    if (explorer.indexOf("trident")>=0) {
        return 'ie';
    }
    //firefox
    else if (explorer.indexOf("firefox") >= 0) {
        return 'Firefox';
    }
    //Chrome
    else if(explorer.indexOf("chrome") >= 0){
        return 'Chrome';
    }
    //Opera
    else if(explorer.indexOf("opera") >= 0){
        return 'Opera';
    }
    //Safari
    else if(explorer.indexOf("safari") >= 0){
        return 'Safari';
    }
}

接下来就是导出excel的提取出来的方法。

function exportExcel(JSONData, filename,title,filter) {//整个表格拷贝到EXCEL中
    if(getExplorer()=='ie') {
        try {
              var curTb= document.getElementById("tableData");
            if(!JSONData)
                return;
            //转化json为object
            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
           curTb.innerHTML = createTable(arrData, title, filter);//生产table的html 字符串
            var curTbl = document.getElementById("table");
            var oXL = new ActiveXObject("Excel.Application");

            //创建AX对象excel
            var oWB = oXL.Workbooks.Add();
            //获取workbook对象
            var xlsheet = oWB.Worksheets(1);
            //激活当前sheet
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            //把表格中的内容移到TextRange中
            sel.select;
            //全选TextRange中内容
            sel.execCommand("Copy");
            //复制TextRange中内容
            xlsheet.Paste();
            //粘贴到活动的EXCEL中
            oXL.Visible = true;
            //设置excel可见属性
            var fname = oXL.Application.GetSaveAsFilename(filename, "Excel Spreadsheets (*.xls), *.xls");
        } catch (e) {
            alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对未标记为安全执行脚本的ActiveX控件初始化并执行脚本 → 启用");
            return false;
        } finally {
            oWB.SaveAs(fname);

            oWB.Close(savechanges = false);
            //xls.visible = false;
            oXL.Quit();
            oXL = null;
            //结束excel进程，退出完成
            //window.setInterval("Cleanup();",1);
            idTmr = window.setInterval("Cleanup();", 1);
        }
    } else {
        tableToExcel(JSONData, filename,title,filter)
    }
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}

var tableToExcel =function JSONToExcelConvertor(JSONData, FileName,title,filter) {
    if(!JSONData)
        return;
    //转化json为object
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
    var excel = createTable(arrData, title, filter);//生产table的html 字符串
    var excelFile = "";
    excelFile += '';
    excelFile += ';
    excelFile += '; charset=UTF-8">';
    excelFile += "";
    excelFile += "";
    excelFile += "";
    excelFile += "";
    excelFile += excel;
    excelFile += "";
    excelFile += "";


    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);
}


function createTable(arrData,title,filter) {
    var excel = '';//设置表头var row ="";if(title){//使用标题项for(var i in title){if(title[i].length>=4){
                row +="';}else{
                row +="';}}}else{//不使用标题项for(var i in arrData[0]){
            row +="';}}
    excel += row +"";//设置数据for(var i =0; i < arrData.length; i++){var row ="";for(var index in arrData[i]){//判断是否有过滤行if(filter){if(filter.indexOf(index)==-1){var value = arrData[i][index]==null?"": arrData[i][index];
                    row +='';}}else{var value = arrData[i][index]==null?"": arrData[i][index];
                row +="";}}

        excel += row +"";}

    excel +="

    
     

    
    
        
          
              
" + title[i] + '
             
" + title[i] + '
            
        
    
    
        
           
" + i + '
        
     
    
       
         


          
            
            
            
                
                
                          
' + value + '
                
            
            
            
                      
" + value + "
            
         
     
";

    return  excel;
}

大致思路:

Ie:将产生的包含数据的table字符串（createTable(arrData,title,filter)）放到页面上隐藏div，后将整个表格拷贝到EXCEL中(exportExcel((JSONData, filename,title,filter) ))；

非ie其他浏览器：

首先也是需要生产包含数据的table字符串（createTable(arrData,title,filter)）,

然后采用HTML的方式手动构建excel(JSONToExcelConvertor(JSONData, FileName,title,filter),并导出。

注意：有时会遇到一个问题，就是导出的Excel经常会把我们的数据自动识别为其他格式，例如只有纯数字的字段在导出到 Excel后会被自动识别为数字格式，而一旦数字超过11位，Excel便会将其以科学计数法的形式来显示，比如身份证号码，带区号的电话号码等。

mso-number-format的属性设置书写如下：

``'mso-number-format:\"\@\";'` `class``=``'tdRight'``>`

将mso-number-format 以属性style的形式写在生成的table字符串的td标签中.具体的属性可以参考:

https://www.cnblogs.com/zhangym118/p/6565068.html.

mso-number-format 定义数据格式的css样式罗列下：

mso-number-format:"0"　NO　Decimals　
mso-number-format:"0\.000"　3　Decimals　
mso-number-format:"\#\,\#\#0\.000"　Comma　with　3　dec　
mso-number-format:"mm\/dd\/yy"　Date7　
mso-number-format:"mmmm\　d\,\　yyyy"　Date9　
mso-number-format:"m\/d\/yy\　h\:mm\　AM\/PM"　D　-T　AMPM　
mso-number-format:"Short　Date"　01/03/1998　
mso-number-format:"Medium　Date"　01-mar-98　
mso-number-format:"d\-mmm\-yyyy"　01-mar-1998　
mso-number-format:"Short　Time"　5:16　
mso-number-format:"Medium　Time"　5:16　am　
mso-number-format:"Long　Time"　5:16:21:00　
mso-number-format:"Percent"　Percent　-　two　decimals　
mso-number-format:"0%"　Percent　-　no　decimals　
mso-number-format:"0\.E+00"　Scientific　Notation　
mso-number-format:"\@"　Text　 （目前只用过）
mso-number-format:"\#\　???\/???"　Fractions　-　up　to　3　digits　(312/943)


目前只用过mso-number-format:"\@"　

在导出的表格中显示为文本格式。

以上JS导出Excel只适合表格样式比较简单的，不涉及复杂的表头，单元格合并等。