Extjs4 grid导出Excel

程序员文章站 2022-05-31 12:19:32

...

简单方便可以直接使用不需要服务端代码

grid2Excel.js

/**
* Created with IntelliJ IDEA.
* User: zhuhq
* Date: 14-3-17
* Time: 下午12:26
* To change this template use File | Settings | File Templates.
*/
/**
*
* function grid2Excel(grid,filename)
* @param grid Extjs grid panel
* @param filename Excel 文件名称
*
* **/
(function(){
    var Base64 = (function() {
        // private property
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

        // private method for UTF-8 encoding
        function utf8Encode(string) {
            string = string.replace(/\r\n/g,"\n");
            var utftext = "";
            for (var n = 0; n < string.length; n++) {
                var c = string.charCodeAt(n);
                if (c < 128) {
                    utftext += String.fromCharCode(c);
                }
                else if((c > 127) && (c < 2048)) {
                    utftext += String.fromCharCode((c >> 6) | 192);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
                else {
                    utftext += String.fromCharCode((c >> 12) | 224);
                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                    utftext += String.fromCharCode((c & 63) | 128);
                }
            }
            return utftext;
        }

        // public method for encoding
        return {
            //encode : (typeof btoa == 'function') ? function(input) { return btoa(input); } : function (input) {
            encode : function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
                input = utf8Encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                        keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                        keyStr.charAt(enc3) + keyStr.charAt(enc4);
                }
                return output;
            }
        };
    })();
    var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };
    var tableToExcel = function(table,fileName) {
        var uri = 'data:application/vnd.ms-excel;base64,'
            ,fileName = fileName || 'excelexport'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"' +
            ' xmlns:x="urn:schemas-microsoft-com:office:exc el" xmlns="http://www.w3.org/TR/REC-html40"><head>' +
            '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">'+
            '</head><body>{table}</body></html>';

        var ctx = {worksheet:'Worksheet', table: table};
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.hreflang = 'zh';
        a.charset = 'utf8';
        a.type="application/vnd.ms-excel";
        a.href = uri + Base64.encode(format(template,ctx));
        a.target = '_blank';
        a.download = fileName + '.xls';
        a.click();

    };
    window.grid2Excel = function(grid,fileName) {
        var columns = grid.initialConfig.columns|| [],
            store = grid.getStore(),
            headLevel1 = [],headLevel2 = [],headLevel = 1,isGroup = false,
            dataIndex =[],tableStr = '<table><thead>{thead}</thead><tbody>{tbody}</tbody></table>';

        columns.forEach(function(column) {
                if(!column.dataIndex) {
                    isGroup = true;
                    return false;
                }

        });
        if(isGroup) {
            headLevel = 2; //只支持二级表头
        }
        columns.forEach(function(column) {
            if(column.dataIndex) {
                column.colspan = 1;
                column.rowspan = headLevel;
                headLevel1.push(column);
                dataIndex.push(column);
            }else {
                var items = column.columns ||[];
                column.colspan = items.length;
                column.rowspan = 1;
                headLevel1.push(column);
                items.forEach(function(item) {
                    item.colspan = 1;
                    item.rowspan = 1;
                    headLevel2.push(item);
                    dataIndex.push(item);
                })
            }
        });
        var headLevel1Str = '<tr>';
        headLevel1.forEach(function(head) {
            headLevel1Str += '<th colspan = "'+head.colspan+
                '" rowspan="'+head.rowspan+'">'+head.text+'</th>';

        });
        headLevel1Str += '</tr>';

        var headLevel2Str = '';
        if(headLevel2.length > 0) {
            headLevel2Str += '<tr>';
            headLevel2.forEach(function(head) {
                headLevel2Str += '<th colspan = "'+head.colspan+
                    '" rowspan="'+head.rowspan+'">'+head.text+'</th>';
            });
            headLevel2Str += '</tr>'
        }
        var theadStr = headLevel1Str + headLevel2Str,
            tbodyStr = '',defRenderer = function(value) {
                return value;
            };

        store.each(function(r) {
            tbodyStr += '<tr>';
            dataIndex.forEach(function(c) {
                var renderere = c.renderer || defRenderer;
                tbodyStr += '<td>'+renderere.call(r,r.get(c.dataIndex))+'</td>'
            });
            tbodyStr +='</tr>'
        });
        tableStr = format(tableStr,{
            thead:theadStr,
            tbody:tbodyStr
        });

        tableToExcel(tableStr,fileName);

    }
})()
使用方法： 1> 在页面中引入grid2Excel.js 文件 2> 添加Button

var saveBtn = Ext.create('Ext.button.Button',{
        xtype:'button',
        iconCls:'excel',
        type: 'excel',
        text:'保存为Excel',
        handler:function() {
            //grid 为Extjs grid对象
            //"导出文件名" 为导出的Excel文件的名称
            grid2Excel(grid,"导出文件");
        }
    })
注意：目前只支持最多俩级表头的grid导出

如有纰漏请不吝指正，转载请注明出处，谢谢！充个话费支持一下 ©天朗工作室

上一篇： css教程手册 css

下一篇：分享两本android电子书

Extjs4 grid导出Excel

详解如何在Vue项目中导出Excel

jxl 导出数据到excel的实例讲解

使用Python导出Excel图表以及导出为图片的方法

C#自定义导出数据到Excel的类实例

C#导出GridView数据到Excel文件类实例

POI通用导出Excel(.xls,.xlsx)的方法

公共POI导出Excel方法详解

Python导出DBF文件到Excel的方法

SQL 导入导出Excel数据的语句

postman导出excel文件（postman批量发送请求）