使用Extjs完成对GridPanel的导出操作完整步骤

最新推荐文章于 2015-06-30 15:04:34 发布
最新推荐文章于 2015-06-30 15:04:34 发布
阅读量3.3k 收藏 1
点赞数
文章标签： extjs alignment header function string encoding
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JecksonChenJinHua/article/details/6835700
版权

1.首先建一个名为test.js文件，局部重要的代码：

 var grid = new Ext.grid.GridPanel({
    store:store,
    mode:'remote',
    title:'用户管理',
    applyTo:'grid',
    width:500,
    height:300,
    frame:true,
    tbar:[{text:"添加",handler:add},{text:"修改",handler:edit},{text:"删除",handler:remove},{text:"导出",handler:exportexcel}],
    columns:[
    {header:"id",width:50,dataIndex:'id',sortable:true},
    {header:"姓名",width:80,dataIndex:'name',sortable:true},
    {header:"年龄",width:80,dataIndex:'password',sortable:true}
    ]
    })

函数：exportexcel

 

function exportexcel() {
 
 var vExportContent = grid.getExcelXml();       
 if (Ext.isIE6 || Ext.isIE7 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) { 
 if (! Ext.fly('frmDummy')) {            
 var frm = document.createElement('form');              
 frm.id = 'frmDummy';            
 frm.name = id;              
 frm.className = 'x-hidden';             
 document.body.appendChild(frm);           
 }          
 Ext.Ajax.request({             
 url: 'exportexcel.php',                
 method: 'POST',               
 form: Ext.fly('frmDummy'),                
 callback: function(o, s, r) {                  
 //alert(r.responseText);            
 },               
 isUpload: true,             
 params: {exportContent: vExportContent}           
 })       
 } else {           
 document.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent);      
 }
}

 

2.新建php文件'exportexcel.php'

 

<?php

header("Pragma: public");
header("Expires: 0"); // set expiration time
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Type: application/force-download");
header('Content-type: application/vnd.ms-excel');
header("Content-Disposition:attachment;filename=export");
echo $_REQUEST['exportContent']; 
?>

 

3.现在是最重要的一步了，是关于访问的php的页面的写法了：我将其命名为test.php

<html>
<head>
<title>注册</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="json.js"></script>
<script type="text/javascript" src="gridToExcel.js"></script>
</head>
<body>
<div id='grid'></div>
</body>
</html>

 

4.下面是我们的gridToExcel.js的内容：

 

/**
 * 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>Generated by ExtJS</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;
    }
});

 

5.ok，按照上面的步骤就可以完成你所要达到的效果了，恭喜您！

 

 

JecksonChenJinHua
关注
ExtJs6.0导出gridPanel数据到本地excel中
NingZuoZuoZuoZuo的博客
05-07 964
//本人根据实际情况改写的，引用的时候还请注意/** * * function grid2Excel(grid,filename) * @param grid Extjs grid panel * @param filename Excel 文件名称 * * **/ (function(){          function export_excel_ie(tableStr, fileName)...
Extjs将GridPanel中的数据导出到Excel的方法
iteye_8029的博客
05-20 153
前些时间老大说客户要求提供将表格中的数据导出到Excel中，因为有时候他们需要将价格资料导出以便制作报价表，于是上网找了一些资料，发现网上其实有很多例子都有浏览器兼容性的问题，于是自己整合，改进之后，终于能兼容支持和浏览器了，遂在这里与大家分享、交流： 首先你需要一个将GridPanel的数据转换成标准Excel格式的JS文件，文件内容如下（貌似CSDN博客不支持上传文件给大家下载，所以唯有直接...
ExtJS的GridPanel导出excel文件
08-19
ExtJS的GridPanel导出excel文件,方便快捷易懂!
Extjs导出Grid数据到Excel
xcrxiaopang的博客
06-30 377
1、调用方式 var excel = new Ext.Excel({ gridId: 'gridId',--GridId sheetName: 'sheetName',--sheetName dsIndex:'oprDate','bizKey','custAbbr','refNo','amount','status','bizItemCn','registerOpA...
Extjs Grid导出表格 功能实现
free__eagle的专栏
06-23 338
1、基本原理是：客户端根据Grid数据、使用ExportExcel.js文件生成Excel格式的XML数据，然后发送到一个服务端文件（ExportExcel.jsp），服务端文件通过设定Content-Type来实现Excel的下载。 2、导出Excel按钮代码： { text:"导出Excel", icon : "../images/icon/upload.png...
js实现ext grid导出到excel
w3053_5fdf588的博客
09-29 296
将grid作为参数传入以下函数即可: function outputAddress(grid){ try { var xls = new ActiveXObject("Excel.Application"); } catch (e) { alert("要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用...
ExtJS 表格面板GridPanel完整例子
03-23
在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成： 1. **Store**: 存储数据的...
ExtJs设置GridPanel表格文本垂直居中示例
10-27
总结起来，在ExtJs中实现`GridPanel`表格文本垂直居中，可以通过监听`Store`的`load`事件并在加载完成后操作DOM，设置单元格的CSS样式来达到目的。这种方法虽然不依赖于ExtJs的内置特性，但可能需要维护，因为它是...
Extjs4 GridPanel 的几种样式使用介绍
10-27
GridPanel是ExtJS框架中用于展示数据的一种重要组件，它允许用户以表格形式查看、操作和管理大量信息。 首先，我们来看一个简单的GridPanel示例。在这个例子中，我们创建了一个包含三列的表格，每列分别绑定到数据...
ExtJs6.5Grid列表导出(包含样式)
05-30
使用ExtJs相关的控件类自己实现的一个ExtJs的Grid列表的导出功能，可以导出列表的相关样式等
ExtJS介绍以及GridPanel
03-18
在实际应用中，GridPanel还可以与其他组件结合，比如使用Toolbar提供操作按钮，或者嵌入其他复杂的组件，如Charts，以实现数据分析和可视化。 除了GridPanel，ExtJS还提供了许多其他组件，如FormPanel（用于创建...
Ext.grid.GridPanel 导出生成 Excel
kanpiaoxue的专栏
04-13 238
function Publicjs(){ } Publicjs.prototype = { /** * *直接由Ext的grid生成Excel *[注意] 只支持IE *param: gridId Ext grid的ID */ extGridToExcel : function(gridId,sheetName){ try{ ...
ExtJS 给GridToExcel.js 添加分组GridPanel导出功能
cx2vj的专栏
07-25 1593
原帖:  ExtJs Grid导出到Excel(修正版) http://extjs.org.cn/node/324 解决Ext Grid导出Excel在JSP等环境中文乱码问题（支持Windows和Aix） http://hi.baidu.com/wangkai99/item/cb174511f84892071994ec6a 对里面的excel的xml格式也进行了一点修改
Ext grid 导出excel
woshi_bobo2010
04-07 2217
<br /> <br />利用Ext grid显示前台数据，然后把前台数据进行Excel表导出，再导出报表的时候要求：<br />1、要把grid数据显示的表头信息导入Excel表<br />2、在导出Excle表的时候，可以进行选择，是进行勾选的导出，还是批量导出（勾选导出，根据勾选的记录导出，批量导出，全部导出），<br />3、在进行批量导出的时候，是分页显示还是显示成一页（sheet标签，在Excel表中用）<br /> <br />首先,准备数据，创建grid并把数据填充进去，这里我就不再多说，不
extjs grid 分页 导出 excel
JecksonChenJinHua的专栏
10-13 3479
、基本原理是：客户端根据Grid数据、使用ExportExcel.js文件生成Excel格式的XML数据，然后发送到一个服务端文件（ExportExcel.jsp），服务端文件通过设定Content-Type来实现Excel的下载。 2、导出Excel按钮代码：
EXT中关于得到grid分页数据以及EXT导出你所要数据
sebatinsky的专栏
01-22 4025
     网上找了几次,没有找到自己的需求,未果,所以还是自己摸索吧.     其实这里说的内容相当简单,主要的意思就是,得到你当前页面中某一行或者是某几行,更或者是得到当前页面的数据.     主要是昨天上头叫我做查询导出,导出选择项,导出当前页等,看看效果,留待以后是否会用上.说实话,对EXT,我也算是一个没入门的门外汉,虽然接触了不少,总的来说,里面内容实在太多.所以还得慢慢
Ext4原生grid的导出控件
hanqing
12-18 2099
前言 ：导出建议在后端进行,避免一些兼容性问题。 本文借鉴网络上的一个js包,在此基础上稍微完善了些，并添加了即将扩展和完善的东西，今后会逐步完善它。 使用样例: <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"
Ext.grid.gridpanel excel 导出
sdnueq的专栏
02-25 1518
查看文章  [转]解决有关Ext Grid导出Excel在JSP等环境中不可用的问题2010-05-06 15:43<br />转自:http://www.ajaxbbs.net/post/10.html<br /> <br />有关ExtGrid导出Excel的实现方式，网上已经有很多，官方也给出了一个方 案，代码不是很完善，不过已经有高人对这个进行了修正。具体实现方式及代码我这里就不再多说了，大家可以参看：http://www.dojochina.com/index.php?q=node/1254， 附
ExtJS中使用JXL导出完整数据与当前页示例
在ExtJS框架中，使用JXL（Java Excel Library）库进行数据导出是一项实用的功能，特别是当需要将大量数据或者当前页的数据保存为Excel文件时。本文档提供了一个实践性的教程，教你如何在ExtJS应用中实现数据的全量...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值