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


function createTable(arrData,title,filter) {
    var excel = '<table border="1" cellspacing="1" cellpadding="1"  id="table">';
    //設置表頭
    var row = "<tr>";
    if(title)
    {
        //使用標題項
        for (var i in title) {
            if (title[i].length>=4){
                row += "<th align='center'  width='100px'>" + title[i] + '</th>';
            }else{
                row += "<th align='center'>" + title[i] + '</th>';
            }
        }
    }
    else{
        //不使用標題項
        for (var i in arrData[0]) {
            row += "<th align='center'>" + i + '</th>';
        }
    }
    excel += row + "</tr>";
    //設置數據
    for (var i = 0; i < arrData.length; i++) {
        var row = "<tr>";

        for (var index in arrData[i]) {
            //判斷是否有過濾行
            if(filter)
            {
                if(filter.indexOf(index)==-1)
                {
                    var value = arrData[i][index] == null ? "" : arrData[i][index];
                    row += '<td    style="mso-number-format:\'\@\';">' + value + '</td>';
                }
            }
            else
            {
                var value = arrData[i][index] == null ? "" : arrData[i][index];
                row += "<td align='center'  style='mso-number-format: \"\@\"; '    >" + value + "</td>";
            }
        }

        excel += row + "</tr>";
    }

    excel += "</table>";

    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的屬性設置書寫如下：

`<td style=``'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只適合表格樣式比較簡單的，不涉及複雜的表頭，單元格合併等。

js導出excel(帶邊框以及文本樣式)

js導出excel

spring mvc綁定對象String轉Date 問題

那些什麼，？之類的Cron表達式

IDEA快捷鍵windows mac對比

Jmeter的使用參考

spring boot 無法獲取到@value 的值

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結