ext导出表格数据到excel中

最新推荐文章于 2020-09-30 14:46:57 发布
转载 最新推荐文章于 2020-09-30 14:46:57 发布 · 86 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/kunpengit/archive/2012/07/26/2610236.html
文章标签：

#java #javascript #ViewUI

本文详细介绍了如何利用DWR（Direct Web Remoting）和Ext JS库构建一个网页应用，实现数据从数据库中读取并导出至Excel文件的功能。包括页面的初始化设置、数据读取、导出逻辑以及使用方法。

1.先写jsp页面。

<%@ page contentType="text/html;charset=utf-8"%>
<%
    String ctx = request.getContextPath();
    //String ext = ctx + "/ext-3.0.0";
    pageContext.setAttribute("ctx", ctx);
    //pageContext.setAttribute("ext", ext);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>DWRProxy</title>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/interface/infoManager.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
        <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
        <script type="text/javascript" src="DWRProxy.js"></script>
        
        <script type="text/javascript" src="${ctx}/grid2excel/js/gridToExcel.js"></script>
        <script type="text/javascript" src="excel.js"></script>
        
    </head>
    <body>
        <h1>DWRProxy</h1>
        <a href="index.jsp">返回</a>
        <hr>
        <div id="grid" style="height:300px;"></div>
    </body>
</html>

　　

 2.gridToExcel.js页面,直接copy

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 &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>';
        return result;
    }
});

　　3.excel.js

Ext.onReady(function(){
    var exportButton = new Ext.Button({////导出按钮定义
                            text : "导出到excel",
                            style : {
                                marginRight : '20px'
                            },
                            handler : function() {
                                var vExportContent = grid.getExcelXml(); //获取数据
                               // alert(vExportContent);
                            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);
                            }
                        }
        });

    var info = Ext.data.Record.create([
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'sex', type: 'int'},
        {name: 'email', type: 'string'},
        {name: 'tel', type: 'string'},
        {name: 'addTime'},
        {name: 'descn', type: 'string'}
    ]);

var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
    var cm = new Ext.grid.ColumnModel([
    sm,
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'性别',dataIndex:'sex'},
        {header:'邮箱',dataIndex:'email'},
        {header:'电话',dataIndex:'tel'},
        {header:'添加时间',dataIndex:'addTime'},
        {header:'备注',dataIndex:'descn'}
    ]);

    var store = new Ext.data.Store({
        proxy: new Ext.data.DWRProxy(infoManager.getItems, true),
        reader: new Ext.data.ListRangeReader({
            totalProperty: 'totalSize',
            root: 'data',
            id: 'id'
        }, info),
        remoteSort: true
    });

    var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        //autoHeight: true,
        height:500,
        store: store,
        cm: cm,
        sm: sm,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录",
            items:[
            '-',
            exportButton
            ]
        })
    });
    
    store.load({params:{start:0,limit:10}});
  
    });

 

4.exportUrl.jsp   直接copy，别改，不然导出的excel为空。

<%@ page language="java" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<% 
request.setCharacterEncoding("UTF-8");

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")); 
%>

5.有关java代码可参考我的，ext整合dwr的小例子

转载于:https://www.cnblogs.com/kunpengit/archive/2012/07/26/2610236.html

ext实现导出excel的功能。
09-28
可以选择字段导出，也可以排序导出。还可以导出当前页和导出所有的数据。
extjs3把数据导出至excel
12-13
extjs中把数据导出excel，是一个不错的学习代码资源
Ext grid 导出Excel
03-21
NULL 博文链接：https://zhaolicric.iteye.com/blog/970655
利用ExtJS导出Excel
weixin_34071713的博客
03-23 257
1 Ext.ns("Msp.Component"); 2 3 //config = { 4 // fileName : "净值及头寸核对", 5 // exportDate : "2014-01-20", 6 // dataSource : [ 7 // {grid : grid1, param : param1, sh...
Ext Grid 导出Excel
03-21
当我们需要将Ext Grid中的数据导出为Excel格式时，这通常涉及到数据的处理和转换，以便用户能够方便地在离线环境中分析或共享。这篇博客"Ext Grid 导出Excel"可能详细介绍了如何实现这一功能。 首先，让我们理解Ext...
Ext Grid数据导出到Excel
12-31
### Ext Grid 数据导出到Excel知识点详解 #### 一、背景与目的 在现代Web应用开发中，数据展示和管理是十分重要的环节。对于大型的数据表格（Grid），开发者经常需要提供一个导出功能，以便用户可以将当前显示的...
Ext grid数据导出为Excel表格的实现代码
在实际应用中，常常需要将显示在Ext grid中的数据导出到Excel文件中，以便用户可以使用Excel的格式化、打印、计算等功能进行进一步处理。 知识点二：Ext grid数据导出流程 将Ext grid的数据导出为Excel的过程通常...
Ext 导出Excel
03-22
标题 "Ext 导出Excel" 暗示我们要讨论的是如何使用Ext JS库来导出数据到Excel格式的文件。Ext JS是一个强大的JavaScript框架，常用于构建富客户端应用，其功能包括数据管理、用户界面组件以及与服务器端的交互。 在...
Ext 中实现Excel导出
weixin_43434182的博客
09-30 707
1 导入相关poijar 2 前台文件 case 'exportExcel': var extraParams=mainPanel.store.proxy.extraParams; var myMask = new Ext.LoadMask({ target : mainPanel }); myMask.mask
datatable数据导出excel
10-07
datatable数据导出excel,datatable数据导出excel
extjs的Word导出，excel读取和导出demo
01-04
myeclipse下的Web项目，前台Extjs，数据库mysql，文件里面附有SQL文件
普通方式和Ext方式导出Excel代码
03-27
包括用普通的方法来导出Excel 还有用Ext方式来导出Excel 可以选中行来导出
Ext中的Excel导入界面
11-21
提供在java中使用前端Ext导入Excel文件的使用，包括前端导入Excel文件的窗口js设置，以及后台接收Excel文件的处理等内容，本代码可直接修改使用，非常方便
ext直接导出结果到excel
silence1214的专栏
03-15 1690
昨晚到现在一直在找比较好用的方案，phpexcel还有个很强大的那个组件以及xml转化等都尝试了，最简单的莫过于ext自己提供的gridtoexcel，首先这个是根据当前ext的查询结果直接导出的，这个就很便于不管前台用户怎么查询，反正可以导出他想要的查询结果很方便。 1：网上很多关于这个的用法，有在当前页面创建隐藏的form来实现的 2：也有还是创建隐藏form，但是提交的是 非上传方式
导出ext
free__eagle的专栏
06-23 208
extjs 实现动态导出excel - 　 - 我写了一个gridpanel页面，在表格的标题栏可以设置列是否显示 ，现在我想将设置过的页面excel导出， 想要获得将设置的参数在客户端获得然后传到服务器端，判断是否导出列。 现在遇到的问题是，不知道列的是否显示的参数如何获得。请各位大哥大姐帮帮忙啊< 解决方法 cm.isHidden(i)返回定义的cm中,第i列是否显示...
ext导出excel
feidian036的专栏
03-19 304
[code="java"]Ext导出excel很麻烦的，我们可以打开一个window.open()或window.location.href=''发送请求；把操作excel的工作交给后台的action处理就行了 [b]JS代码：[/b] var grid =new Ext.grid.GridPanel({ region:'center', store:store, cm:cm, ...
EXT中导出表格中的数据到Excel
weixin_30666753的博客
02-04 215
{ itemId: 'excel', text: '导出', iconCls: 'btnExportExcel', disabled: false, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值