通过js代码导出Excel表格

1.js代码

View Code

//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）