Ext grid 导出Excel

3确实不兼容,需要修改大量数据

我的导出表格有动态的合并表头存在

代码:


/**
 * base64 encode / decode
 * 
 * @location http://www.webtoolkit.info/
 * 
 */
 
var Base64 = {
 
    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
 
    // public method for encoding
    encode : function(input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;
 
        input = Base64._utf8_encode(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 + this._keyStr.charAt(enc1)
                    + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3)
                    + this._keyStr.charAt(enc4);
 
        }
 
        return output;
    },
 
    // public method for decoding
    decode : function(input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;
 
        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 
        while (i < input.length) {
 
            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));
 
            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;
 
            output = output + String.fromCharCode(chr1);
 
            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
 
        }
 
        output = Base64._utf8_decode(output);
 
        return output;
 
    },
 
    // private method for UTF-8 encoding
    _utf8_encode : function(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;
    },
 
    // private method for UTF-8 decoding
    _utf8_decode : function(utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
 
        while (i < utftext.length) {
 
            c = utftext.charCodeAt(i);
 
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12)
                        | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
 
        }
 
        return string;
    }
 
}
 
Ext.override(
                Ext.grid.GridPanel,
                {
                    getExcelXml : function(includeHidden, config) {
                        var worksheet = this.createWorksheet(includeHidden,
                                config);
                        // var totalWidth = this.getColumnModel().getTotalWidth(
                        //         includeHidden);
                        var innertitle = '';
                        if (config && config.title) {
                            innertitle = config.title;
                        } else {
                            innertitle = this.title;
                        }
                        return '<xml version="1.0" encoding="utf-8">'
                                + '<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">'
                                + '<o:DocumentProperties><o:Title>'
                                + innertitle
                                + '</o:Title></o:DocumentProperties>'
                                + '<ss:ExcelWorkbook>'
                                + '<ss:WindowHeight>'
                                + worksheet.height
                                + '</ss:WindowHeight>'
                                + '<ss:WindowWidth>'
                                + worksheet.width
                                + '</ss:WindowWidth>'
                                + '<ss:ProtectStructure>False</ss:ProtectStructure>'
                                + '<ss:ProtectWindows>False</ss:ProtectWindows>'
                                + '</ss:ExcelWorkbook>'
                                + '<ss:Styles>'
                                + '<ss:Style ss:ID="Default">'
                                + '<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />'
                                + '<ss:Font ss:FontName="arial" ss:Size="10" />'
                                + '<ss:Borders>'
                                + '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />'
                                + '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />'
                                + '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />'
                                + '<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />'
                                + '</ss:Borders>'
                                + '<ss:Interior />'
                                + '<ss:NumberFormat />'
                                + '<ss:Protection />'
                                + '</ss:Style>'
                                + '<ss:Style ss:ID="title">'
                                + '<ss:Borders />'
                                + '<ss:Font />'
                                + '<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />'
                                + '<ss:NumberFormat ss:Format="@" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:ID="headercell">'
                                + '<ss:Font ss:Bold="1" ss:Size="10" />'
                                + '<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />'
                                + '<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:ID="even">'
                                + '<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="even" ss:ID="evendate">'
                                +
                                // '<ss:NumberFormat
                                // ss:Format="[ENG][$-409]dd\-mmm\-yyyy;@" />' +
                                '<ss:NumberFormat ss:Format="yyyy\-m\-d;@" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="even" ss:ID="evenint">'
                                + '<ss:NumberFormat ss:Format="0" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="even" ss:ID="evenfloat">'
                                + '<ss:NumberFormat ss:Format="0.00" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:ID="odd">'
                                + '<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="odd" ss:ID="odddate">'
                                +    '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' 
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="odd" ss:ID="oddint">'
                                + '<ss:NumberFormat ss:Format="0" />'
                                + '</ss:Style>'
                                + '<ss:Style ss:Parent="odd" ss:ID="oddfloat">'
                                + '<ss:NumberFormat ss:Format="0.00" />'
                                + '</ss:Style>'
                                + '</ss:Styles>'
                                + worksheet.xml + '</ss:Workbook>';
                    },
 
                    createWorksheet:function(includeHidden, config) {
                        // Calculate cell data types and extra class names which
                        // affect formatting
                        var cellType = [];
                        var cellTypeClass = [];
                        var cm = this.columns;
                        var totalWidthInPixels = 0;
                        var colXml = '';
                        var headerStr = '';
                        var rowHeaderXml = [ '' ];
                        var headerXml='';
                        var visibleColumnCountReduction = 0;
                        var innertitle = '';
                        var innerstore = null;
                        var colCount = cm.length; 
                        var colitemleg=0;
 
                        if (config && config.title) {
                            innertitle = config.title;
                        } else {
                            innertitle = this.title;
                        }
                        if (!innertitle || innertitle == '') {
                            innertitle = 'Main Title';
                        }
 
                        if (config && config.store) {
                            innerstore = config.store;
                        } else {
                            innerstore = this.store;
                        }

                        for (var i = 0; i < 1; i++) {
                            for(var k=0;k<colCount;k++){   
                                for (var j = 0; j < cm[k].items.length; j++) { 
                                       var colspan=cm[k].items.length-1; }
                                    if (cm[i].text === "" ) {
                                        rowHeaderXml[i] += '<ss:Cell ss:StyleID="headercell" ss:MergeAcross="'
                                                + colspan + '">' + '</ss:Cell>';
                                    } else {
                                        rowHeaderXml[i] += '<ss:Cell ss:StyleID="headercell" ss:MergeAcross="'
                                                + colspan
                                                + '">'
                                                + '<ss:Data ss:Type="String">'
                                                + cm[k].text
                                                + '</ss:Data>'
                                                + '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
                                }  
                            }
                        }
                //        for(var m=0;m<1;m++){ 
                        var w;
                        for (var i = 0; i <colCount; i++) {
                            for(var j=0;j<cm[i].items.length;j++){ 
                            //if ((cm[i].items.items[j].dataIndex === '') && (includeHidden || !cm[i].hidden)) 
                            if (cm[i].items.items[j].text != '')
                               {     w =cm[i].items.items[j].width;
                                 totalWidthInPixels += w;  }
                            if (cm[i].items.items[j].text === "")
                              {
                                colitemleg+=cm[i].items.items.length;
                             cellType.push("None"); cellTypeClass.push(""); 
                             ++visibleColumnCountReduction; } 
                              else { 
                                colXml+= '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />'; 
                                 headerXml+= '<ss:Cell ss:StyleID="headercell">' 
                                  + '<ss:Data ss:Type="String">' 
                                  + cm[i].items.items[j].text 
                                  + '</ss:Data>' 
                                   + '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>' ;  }  }
                            var r=0;
                            for(r;r<this.store.model.prototype.fields.items.length;r++){  
                                     var fld = this.store.model.prototype.fields.items[r];     
                                    // var fld = innerstore.recordType.prototype.fields
                                    //         .get(cm.getDataIndex(i));
                                    switch (fld.type.type) {
                                    case "int":
                                        cellType.push("Number");
                                        cellTypeClass.push("int");
                                        break;
                                    case "float":
                                        cellType.push("Number");
                                        cellTypeClass.push("float");
                                        break;
                                    case "bool":
                                    case "boolean":
                                        cellType.push("String");
                                        cellTypeClass.push("");
                                        break;
                                    case "date":
                                        cellType.push("DateTime");
                                        cellTypeClass.push("date");
                                        break;
                                    default:
                                        cellType.push("String");
                                        cellTypeClass.push("");
                                        break;
                                    }    // }
                                }
                        //    }
                        }
                        var visibleColumnCount = colitemleg- visibleColumnCountReduction;
                        //----//        
                        var ExpandedRowCount = innerstore.totalCount;
                        
                      //----//    
                        var result = {
                            height : 9000,
                            width : Math.floor(totalWidthInPixels * 30) + 50
                            //width : totalWidthInPixels
                        };
                         for (var q = 0; q < colCount ; q++) {
                         //    for(var j=0;j<cm[i].items.length;j++)  {    
                              headerStr += '<ss:Row ss:AutoFitHeight="1">' +
                              rowHeaderXml[q] + '</ss:Row>';
                             }   
                             //}
                        // Generate worksheet header details.
                        var t = '<ss:Worksheet ss:Name="'
                                + innertitle
                                + '">'
                                + '<ss:Table x:FullRows="1" x:FullColumns="1"'
                                + ' ss:ExpandedColumnCount="'
                                + (visibleColumnCount)
                                + '" ss:ExpandedRowCount="'
                                + (ExpandedRowCount)
                                + '">'
                                + colXml
                                +'<ss:Row ss:AutoFitHeight="1">'+
                                + headerStr+'</ss:Row>'+'<ss:Row ss:AutoFitHeight="1">' + headerXml + '</ss:Row>';
                        // '<ss:Row ss:AutoFitHeight="1">'+ headerXml+
                        // '</ss:Row>';
                        // Generate the data rows from the data in the Store
                        for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) 
                         { 
                         t += '<ss:Row>'; var cellClass = (i & 1) ? 'odd' : 'even'; 
                        r = it[i].data; var k = 0; 
                        for (var j = 0; j < colCount; j++) 
                        for(var p=0;p<cm[j].items.length;p++){ 
                        //{ if ((cm[j].items.items[p].dataIndex != '') && (!includeHidden || !cm[j].isHidden)) 
                              { var v = r[cm[j].items.items[p].dataIndex]; 
                                if (cellType[k] !== "None") {

                                    if (!v) {
                                        t += '<ss:Cell ss:StyleID="'
                                                + cellClass
                                                + '"></ss:Cell>';
                                    } else {
                                        t += '<ss:Cell ss:StyleID="'
                                                + cellClass
                                                + cellTypeClass[k]
                                                + '"><ss:Data ss:Type="'
                                                + cellType[k] + '">';
                                        if (cellType[k] == 'DateTime') {
                                            t += v.format('Y-m-d\\TH:i:s.000'); // no
                                        } else {
                                            v = EncodeValue(v);

                                            t += v;
                                        }
                                        t += '</ss:Data></ss:Cell>';
                                    }}
                                k++;
                                }
                    //        }
                         }
                        t += '</ss:Row>';
                    }
                             
                    //------------------------end from store get el        
                            
                        result.xml = t
                                + '</ss:Table>'
                                + '<x:WorksheetOptions>'
                                + '<x:PageSetup>'
                                + '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />'
                                + '<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />'
                                + '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />'
                                + '</x:PageSetup>'
                                + '<x:FitToPage />'
                                + '<x:Print>'
                                + '<x:PrintErrors>Blank</x:PrintErrors>'
                                + '<x:FitWidth>1</x:FitWidth>'
                                + '<x:FitHeight>32767</x:FitHeight>'
                                + '<x:ValidPrinterInfo />'
                                + '<x:VerticalResolution>600</x:VerticalResolution>'
                                + '</x:Print>'
                                + '<x:Selected />'
                                + '<x:DoNotDisplayGridlines />'
                                + '<x:ProtectObjects>False</x:ProtectObjects>'
                                + '<x:ProtectScenarios>False</x:ProtectScenarios>'
                                + '</x:WorksheetOptions>' + '</ss:Worksheet>';
 
                        // Add function to encode value,2009-4-21
                        function EncodeValue(v) {
                            var re = /[\r|\n]/g; // Handler enter key
                            v = v.toString().replace(re, '');
                            return v;
                        }
                        return result;
            //        }  
                    }
                });
 
Ext.ux.clone=function(obj) {
    if (obj == null || typeof (obj) != 'object')
        return obj;
    if (Ext.isDate(obj))
        return obj.clone();
    var cloneArray = function(arr) {
        var len = arr.length;
        var out = [];
        if (len > 0) {
            for (var i = 0; i < len; ++i)
                out[i] = Ext.ux.clone(arr[i]);
        }
        return out;
    };
    var c = new obj.constructor();
    for ( var prop in obj) {
        var p = obj[prop];
        if (Ext.isArray(p))
            c[prop] = cloneArray(p);
        else if (typeof p == 'object')
            c[prop] = Ext.ux.clone(p);
        else
            c[prop] = p;
    }
    return c;
};
 

 

 

 

参考文献:https://blog.csdn.net/oqqXoXo123/article/details/77100121

https://zm8.sm-tc.cn/?src=l4uLj4zF0NCdk5CY0ZyMm5HRkZqL0Iaei4qMlouajdCejYuWnJOa0Juai56Wk4zQycjJzM7OyQ%3D%3D&uid=539877fc23a311c3bc4979e7d01bd625&hid=7b7ac9afbe4104095fe1bd6fb0d56f9f&pos=7&cid=9&time=1531666251729&from=click&restype=1&pagetype=0000000000000408&bu=web&query=gridtoExcel&mode=&v=1&force=true&wap=false&province=%E8%BE%BD%E5%AE%81%E7%9C%81&city=%E6%B2%88%E9%98%B3%E5%B8%82&uc_param_str=dnntnwvepffrgibijbprsvdsdichei

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用ExtJS 4.2.1的完整例子,可以将Grid表格导出Excel文件: ``` Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ux.exporter.Exporter' ]); Ext.onReady(function() { // 模拟数据 var data = []; for (var i = 0; i < 20; i++) { data.push({ name: 'User ' + i, email: 'user' + i + '@example.com', phone: '555-' + Ext.Number.randomInt(1000, 9999) }); } // 创建数据模型 Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); // 创建数据源 var store = Ext.create('Ext.data.Store', { model: 'User', data: data, proxy: { type: 'memory', reader: { type: 'json', root: 'data' } } }); // 创建Grid表格 var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], width: 400, height: 200, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ xtype: 'button', text: 'Export to Excel', handler: function() { // 导出Excel Ext.ux.exporter.Exporter.exportGrid(grid, 'Excel', { title: 'User List' }); } }] }, { xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }] }); // 渲染Grid表格 Ext.create('Ext.container.Viewport', { layout: 'fit', items: [grid] }); }); ``` 在上面的代码中,我们首先定义了一个模拟数据数组,然后创建了一个数据模型和一个数据源。接下来,我们创建了一个Grid表格,将数据源绑定到该表格中,并添加了一个工具栏和一个分页工具栏。在工具栏中,我们添加了一个按钮,当用户单击该按钮时,将调用Ext.ux.exporter.Exporter.exportGrid函数将Grid表格导出Excel文件。 需要注意的是,我们使用了Ext.ux.exporter.Exporter类来执行导出操作。该类是ExtJS的一个扩展,需要在应用程序中明确声明。在本例中,我们使用了Ext.require函数来加载必需的类和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值