通過js代碼導出Excel表格

1.js代碼

//grid導出exl
function outputAddress(grid, strMethod) {
    try {
        var xls = new ActiveXObject("Excel.Application");
    }
    catch (e) {
        alert("要打印該表，您必須安裝Excel電子表格軟件，同時瀏覽器須使用“ActiveX 控件”，您的瀏覽器須允許執行控件。 請點擊【幫助】了解瀏覽器設置方法！");
        return;
    }
    xls.visible = true; //設置excel為可見   
    var xlBook = xls.Workbooks.Add;
    var xlSheet = xlBook.Worksheets(1);

    var cm = grid.getColumnModel();
    var colCount = cm.getColumnCount();
    var temp_obj = [];
    //只下載沒有隱藏的列(isHidden()為true表示隱藏,其他都為顯示)   
    //臨時數組,存放所有當前顯示列的下標
    for (i = 0; i < colCount; i++) {
        if (cm.isHidden(i) != true || (strMethod != null && (strMethod.indexOf("#" + cm.getColumnById(i).dataIndex.toString() + "#") > -1))) {
            temp_obj.push(i);
        }
    }
    for (i = 1; i <= temp_obj.length; i++) {
        //顯示列的列標題
        xlSheet.Cells(1, i).Value = (cm.getColumnHeader(temp_obj[i - 1])).toString().replace('<center>', "").replace('</center>', "").replace('<middle>', "").replace('</middle>', "").replace('<br>', "");
        if (cm.getColumnHeader(temp_obj[i - 1]).indexOf('<center>') > -1) {
            xlSheet.Cells(1, i).HorizontalAlignment = -4108;
        }
    }
    var store = grid.getStore();
    var recordCount = store.getCount();
    var view = grid.getView();
    for (i = 1; i <= recordCount; i++) {
        for (j = 1; j <= temp_obj.length; j++) {
            //EXCEL數據從第二行開始,故row = i + 1;   
            xlSheet.Cells(i + 1, j).Value = view.getCell(i - 1, temp_obj[j - 1]).innerText;
        }
    }
    xlSheet.Columns.AutoFit;
    xls.ActiveWindow.Zoom = 100
    xls.UserControl = true; //很重要,不能省略,不然會出問題 意思是excel交由用戶控制   
    xls = null;
    xlBook = null;
    xlSheet = null;
}

function replaceHtml(replacedStr, repStr, endStr) {
    var replacedStrF = "";
    var replacedStrB = "";
    var repStrIndex = replacedStr.indexOf(repStr);
    while (repStrIndex != -1) {
        replacedStrF = replacedStr.substring(0, repStrIndex);
        replacedStrB = replacedStr.substring(repStrIndex, replacedStr.length);
        replacedStrB = replacedStrB.substring(replacedStrB.indexOf(endStr) + 1, replacedStrB.length);
        replacedStr = replacedStrF + replacedStrB;
        repStrIndex = replacedStr.indexOf(repStr);
    }
    return replacedStr;
}

function replaceHtml1(replacedStr, repStr, endStr) {
    var replacedStrF = "";
    var replacedStrB = "";
    var repStrIndex = replacedStr.indexOf(repStr);
    while (repStrIndex != -1) {
        replacedStrF = replacedStr.substring(0, repStrIndex);
        replacedStrB = replacedStr.substring(repStrIndex, replacedStr.length);
        replacedStrB = replacedStrB.substring(replacedStrB.indexOf(endStr) + 1, replacedStrB.length);
        replacedStr = replacedStrF + replacedStrB;
        repStrIndex = replacedStr.indexOf(repStr);
    }
    return replacedStr;
}

//elTalbeOut 這個為導出內容的外層表格，主要是設置border之類的樣式，elDiv則是整個導出的html部分
function htmlToExcel(GridPanel_ID, ColumnWidth, Border) {
    try {
        if (navigator.userAgent.indexOf("MSIE") > 0) {
            ToExcel_IE(GridPanel_ID, ColumnWidth, Border);
        }
        else {
            ToExcel_FF(GridPanel_ID, Border);
        }
        ColumnWidth = null;
    } catch (e) {
        alert(e.description)
    }
}

function ToExcel_IE(GridPanel_ID, ColumnWidth, Border) {

    //獲取需要導出的內容
    var elDiv = document.getElementById(GridPanel_ID);
    //設置導出前的數據，為導出后返回格式而設置
    var elDivStrBak = elDiv.innerHTML;

    //過濾elDiv內容
    var elDivStr = elDiv.innerHTML;
    elDivStr = replaceHtml(elDivStr, "<A", ">");
    elDivStr = replaceHtml(elDivStr, "</A", ">");
    elDivStr = replaceHtml(elDivStr, "<IMG", ">");
    //設置table的border=1，這樣到excel中就有表格線 ps:感謝雙面提醒
    if (Border != null) {
        elDivStr = elDivStr.replace(/<TABLE/g, "<TABLE border=" + Border);
    }
    elDiv.innerHTML = elDivStr;
    elDivStr = "";

    var oRangeRef = document.body.createTextRange();
    oRangeRef.moveToElementText(elDiv);
    oRangeRef.execCommand("Copy");

    //返回格式變換以前的內容   
    elDiv.innerHTML = elDivStrBak;
    //內容數據可能很大，所以賦空   
    elDivStrBak = "";
    elDiv = null;

    var oXL = new ActiveXObject("Excel.Application")
    var oWB = oXL.Workbooks.Add;
    var oSheet = oWB.ActiveSheet;
    oSheet.Paste();
    //oSheet.Cells.NumberFormatLocal = "@";
    oSheet.Columns("D:D").Select
    oSheet.Columns.AutoFit;
    ColumnWidth = (ColumnWidth == null ? '' : ColumnWidth);
    for (i = 0; i < ColumnWidth.length; i++) {
        oSheet.Columns(parseInt(ColumnWidth[i].split(",")[0])).ColumnWidth = parseInt(ColumnWidth[i].split(",")[1]);
    }
    //oXL.Selection.ColumnWidth = 20
    oXL.ActiveWindow.Zoom = 100
    oXL.Visible = true;
    oXL.UserControl = true; //很重要,不能省略,不然會出問題 意思是excel交由用戶控制   
    oSheet = null;
    oWB = null;
    appExcel = null;
    oXL = null;
}

var ToExcel_FF = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
      template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
        format = function(s, c) {
            return s.replace(/{(\w+)}/g,
            function(m, p) { return c[p]; })
        }
    return function(GridPanel_ID, Border) {
        var elDiv = document.getElementById(GridPanel_ID);
        //過濾elDiv內容
        var elDivStr = elDiv.innerHTML;
        elDivStr = replaceHtml(elDivStr, "<a", ">");
        elDivStr = replaceHtml(elDivStr, "</a", ">");
        elDivStr = replaceHtml(elDivStr, "<img", ">");
        //設置table的border=1，這樣到excel中就有表格線 ps:感謝雙面提醒
        if (Border != null) {
            elDivStr = elDivStr.replace(/<table/g, "<table border=" + Border);
        }
        var ctx = { worksheet: '' || 'Worksheet', table: elDivStr }
        window.location.href = uri + base64(format(template, ctx));
        //返回格式變換以前的內容
        elDivStr = "";
        elDiv = null;
    }
})()

2.調用方法

                var arrStr = new Array() //可以通過數組的形式設置列寬，如果不設置傳null可以
                arrStr.push("1,120");
                arrStr.push("2,120");
                arrStr.push("4,120");
                htmlToExcel("gridArray", arrStr, 1);//這里的1代表的是border=1的意思。

以上方法在IE中導出的Excel測試通過，但是在Firefox中導出的文件可能需要手動的修改文件后綴名（如8trX_ZaE.xls.part）