`
cyd198633
  • 浏览: 26167 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

ExtJS 导出 Excel

excel 
阅读更多
/**
* allows for downloading of grid data (store) directly into excel
* Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
* converts to Base64, then loads everything into a data URL link.
*
* @author        Animal        <extjs support team>
*
*/

/**
* base64 encode / decode
*
* @location     http://www.webtoolkit.info/
*
*/

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(utf8Encode(input));
        } : 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;
        }
    };
})();

Ext.override(Ext.grid.GridPanel, {
    getExcelXml: function(includeHidden) {
        var worksheet = this.createWorksheet(includeHidden);
        var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
        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>' + this.title + '</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="yyyy-mm-dd" />' +
            '</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) {
        // Calculate cell data types and extra class names which affect formatting
        var cellType = [];
        var cellTypeClass = [];
        var cm = this.getColumnModel();
        var totalWidthInPixels = 0;
        var colXml = '';
        var headerXml = '';
        var visibleColumnCountReduction = 0;
        var colCount = cm.getColumnCount();
        for (var i = 0; i < colCount; i++) {
            if ((cm.getDataIndex(i) != '')
                && (includeHidden || !cm.isHidden(i))) {
                var w = cm.getColumnWidth(i)
                totalWidthInPixels += w;
                if (cm.getColumnHeader(i) === ""){
                    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.getColumnHeader(i) + '</ss:Data>' +
                        '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
                    var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
                    switch(fld.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 = cellType.length - visibleColumnCountReduction;

        var result = {
            height: 9000,
            width: Math.floor(totalWidthInPixels * 30) + 50
        };

        // Generate worksheet header details.
        var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
            '<ss:Names>' +
            '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
            '</ss:Names>' +
            '<ss:Table x:FullRows="1" x:FullColumns="1"' +
            ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
            '" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '">' +
            colXml +
            '<ss:Row ss:Height="38">' +
            '<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
            '<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
            '<html:B></html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
            '</ss:Cell>' +
            '</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++) {
                if ((cm.getDataIndex(j) != '')
                    && (includeHidden || !cm.isHidden(j))) {
                    var v = r[cm.getDataIndex(j)];
                    if (cellType[k] !== "None") {
                        t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
                        if (cellType[k] == 'DateTime') {
                            t += v.format('Y-m-d');
                        } else {
                            t += v;
                        }
                        t +='</ss:Data></ss:Cell>';
                    }
                    k++;
                }
            }
            t += '</ss:Row>';
        }

        result.xml = t + '</ss:Table>' +
            '<x:WorksheetOptions>' +
            '<x:PageSetup>' +
            '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
            '<x:Footer x:Data="Page &amp;P of &amp;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>';
        return result;
    }
});
ExtJS中的导出按钮代码如下：
{
                            text : "导出到excel",
                            style : {
                                marginRight : '20px'
                            },
                            handler : function() {
                                var vExportContent = gridpanel.getExcelXml(); //获取数据
                            if (Ext.isIE8||Ext.isIE6 || Ext.isIE7 || Ext.isSafari
                                    || Ext.isSafari2 || Ext.isSafari3) { //判断浏览器

                                var fd = Ext.get('frmDummy');
                                if (!fd) {
                                    fd = Ext.DomHelper.append(
                                            Ext.getBody(), {
                                                tag : 'form',
                                                method : 'post',
                                                id : 'frmDummy',
                                                action : 'exportUrl.jsp',
                                                target : '_blank',
                                                name : 'frmDummy',
                                                cls : 'x-hidden',
                                                cn : [ {
                                                    tag : 'input',
                                                    name : 'exportContent',
                                                    id : 'exportContent',
                                                    type : 'hidden'
                                                } ]
                                            }, true);
                                   
                                }
                                fd.child('#exportContent').set( {
                                    value : vExportContent
                                });
                                fd.dom.submit();
                            } else {
                                document.location = 'data:application/vnd.ms-excel;base64,' + Base64
                                        .encode(vExportContent);
                            }
                        }}
exportUrl.jsp页面的代码如下：
<%
response.setHeader("Content-Type","application/force-download");
response.setHeader("Content-Type","application/vnd.ms-excel");
response.setHeader("Content-Disposition","attachment;filename=export.xls");
out.print(request.getParameter("exportContent"));
%>
注意事项：
1.exportUrl.jsp的页面只需要以上的代码，多余的都不要了，否则生成的excel文件内容为Null
2.生成的xls文件在Excel打开过程中可能会出现如下错误：
---
加载期间在下述区域中出现了问题(P):
表格
由于错误，此文件无法打开。错误列于:C:\Documents and Settings\..\Local Settings\Temporary Internet
---
这是由于输入的数据中存在空格或者与设置中的类型不符，我遇到的问题就是由于Columns中的header中有类似于“日吨水<br>综合费”这样的属性而产生的，修改即可
3.在Google、FireFox、IE8/IE9测试通过
分享到：
| 解决乱码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS导出Excel

    "ExtJS导出Excel"的功能则是允许用户将`grid`中的数据方便地导出为Excel格式，这样可以方便数据的保存、分析和共享。 在实现页面级的ExtJS `grid`数据导出到Excel时，通常会涉及到以下几个关键知识点： 1. **ExtJS...

    extjs4导出excel

    "extjs4导出excel"的功能就是实现了这个需求，让用户能够在ExtJS 4应用中方便地导出表格数据到Excel文件。 在ExtJS 4中实现数据导出至Excel通常涉及以下几个关键步骤： 1. **数据收集**：首先，你需要收集要导出的...

    extjs 导出excel

    在EXTJS中，导出Excel是一项常见的需求，用于将数据从网页表格中导出到Excel文件，方便用户进行数据管理和分析。EXTJS是一款强大的JavaScript框架，提供了丰富的组件库，其中包括表格（Grid）组件，可以方便地实现...

    Extjs导出excel 推荐

    本篇文章将深入探讨如何使用ExtJS实现导出表格数据到Excel的功能。 首先，我们要理解ExtJS中的Grid组件，它是展示大量结构化数据的主要方式。Grid可以绑定到各种数据源，并提供了排序、筛选、分页等功能。要实现...

    extjs导出excel

    该js代码是在extjs中用到的工具类，将数据以excel的表现形式导出来

    extjs grid数据导出excel文件

    本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先，我们要明白EXTJS Grid的数据导出到Excel的过程通常涉及到以下几个步骤： 1. **获取Grid数据**：在EXTJS中，Grid的数据存储在Store对象中。要...

    ExtJs6 导出excel（包含分组、分组合计行、二重表头）

    总之，ExtJS6的导出Excel功能结合了分组、分组合计行和二重表头，使得数据网格的数据导出更加灵活且信息丰富。通过自定义和扩展，开发者可以创建满足特定业务场景的导出解决方案。而这个过程往往需要对ExtJS的API有...

    EXTJS4导出excel示例

    以下是一个简单的EXTJS4导出Excel的代码示例： ```javascript // 假设你已经有了一个名为grid的GridPanel实例，其store为store实例 var csvData = ''; store.each(function(record) { var fields = record.data; ...

    ext实现导出excel的功能。

    在EXTJS这个强大的JavaScript框架中，实现导出...通过理解并应用上述知识点，我们可以构建一个功能完备且用户友好的EXTJS导出Excel功能。在实际开发中，根据项目需求和资源，可以选择合适的方法和技术来实现这一功能。

    ExtJS实现Excel的导出功能(poi)

    在本文中，我们将探讨如何使用ExtJS框架配合Apache POI库来实现Excel的导出功能。ExtJS是一个强大的JavaScript库，专门用于构建富客户端应用程序，它提供了丰富的组件和功能，而无需关注后端技术。Apache POI是Java...

    Ext导出Excel源码

    标题中的“Ext导出Excel源码”指的是使用ExtJS库来实现从Web应用程序导出数据到Excel文件的功能。ExtJS是一个流行的JavaScript框架，用于构建富客户端应用，而Excel导出功能则是许多企业级应用中常见的需求，允许...

    ExtJs grid导出Excel

    当需要将Grid中的数据导出到Excel时，可以采用两种方法，这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一：使用XLSX.js库** XLSX.js是一个JavaScript库，能够方便地读取和写入Excel文件。在ExtJs中，你...

    extjs 数据导出到Excel,数据列自选

    在导出Excel时，确保正确处理UTF-8编码，使得包含中文的文本能在Excel中正常显示，不会出现乱码。这通常需要在生成Excel文件时设置正确的字符编码，并在前后端之间传输数据时保持一致。 “EXT SDK打包在程序里面，...

    EXTJS Grid导出Excel

    以上就是EXTJS Grid导出Excel的基本流程。在实际应用中，我们可能还需要考虑数据格式化、样式设置、错误处理等细节问题，以提供更好的用户体验。同时，由于EXTJS版本更新频繁，不同版本的EXTJS Grid导出功能可能会...

    EXTJS grid导出EXCEL文件

    EXTJS是一个基于JavaScript的...以上就是EXTJS Grid导出Excel文件的相关知识点，理解并掌握这些内容可以帮助你实现从EXTJS应用中导出数据到Excel的功能。在实际开发中，还需要考虑性能优化、错误处理以及兼容性问题。

    ExtJS实现Excel导出

    ### ExtJS实现Excel导出：深入解析与实践 在当今高度数字化的工作环境中，数据的管理和呈现方式至关重要。其中，Excel作为数据处理和分析的重要工具，其导出功能在各种应用场景中显得尤为关键。ExtJS，作为一种强大...

    Extjs4.2前台导出Excel（多次导出失败bug已修改）

    本文主要探讨的是使用Extjs4.2框架实现纯前台导出Excel功能，并针对多次导出失败的问题进行了修复。 Extjs是一个强大的JavaScript库，专用于构建富客户端应用。版本4.2是其稳定且广泛使用的版本，提供了丰富的组件...

    extjs实现excel导出

    总结起来，通过上述步骤，我们可以使用ExtJS作为前端框架，结合Apache POI库在服务器端生成Excel文件，并将其以HTTP响应的方式发送给客户端，实现在Web应用中导出Excel的功能。这种方式允许用户在前端界面上触发导出...

    Extjs4前台前台grid导出excel

    总结一下，实现ExtJS4前台Grid导出Excel的功能主要涉及以下几个步骤： 1. 获取Grid的数据。 2. 使用SheetJS库将数据转换为Excel格式。 3. 设置工作簿的元数据，如表头和列宽。 4. 将工作簿写入Blob对象，然后通过`...

    extjs模拟excel表格

    9. **打印与导出**：为了让用户能够将数据导出为Excel文件，可以使用第三方库如SheetJS（JS-XLSX）来将GridPanel的数据转换为Excel格式，然后提供下载。 10. **交互性**：Excel的特性还包括查找、替换、冻结行列等...

Magicbox
Global site tag (gtag.js) - Google Analytics