前段时间做了两个项目,用到了Extjs4.2纯前台导出Excel,遇到很多的问题,从网上也找了很多资料,在这里总结一下,做一个记录:

使用方法:

1.下载extexcel文件包,这里可以下载http://download.csdn.net/detail/cui198711/8244017

(设置积分实属无奈:因自己太懒,csdn已没有积分了-。-!)

2.将该包导出项目中(不要随意改变包中的目录结构)

3.在需要导出数据的gridpanel下的dockedItems中引用Button即可,如

      dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                Ext.create('Ext.ux.exporter.Button', {
                                    text: "导出 Excel"
                                })
                            ]
                        }

      ]

 这里有几个注意事项,也是我在项目中遇到的问题,需要特别注意:

1.包中的exportExcel.png图片为4个叠加的效果图,不能随意更换成一个图片,否则按钮放在上面的效果就没有了。

2.网上一般找的extexcel包是有bug的,如第一次导出是没问题的能打开,第二次导出的就打不开了,这个问题需要稍做修改:找到extexcel\exporter\excelFormatter\Workbook.js

在第75行 Ext.apply(this, config)  下面插入以下两句:

      this.styles = [];
      this.worksheets = [];

即可解决。

3.引用的Button位置必须在gridpanel下才可使用,否则会在component.is里报component为空的错,如果真有需要把Button放到gridpanel外面,也是可以的,当然需要做一些修改:

  setComponent: function (component, config) {
        this.component = component;
        //this.store = !component.is ? component : component.getStore(); // only components or stores, if it doesn't respond to is method, it's a store
        // 修改这里
        if(component!=null){
            this.store =  !component.is ? component : component.getStore();
        }
        config.component = this.component;
        config.store = this.store;
        this.setDownloadify(config);
     }

除此之外,需要在Button的容器渲染事件中,手动的给Button赋于component,这样就可以完美解决。

4.要导出的表名称(gridpanel的title)长度不能多于31个字符,也不能包含“\”、"/"、"?"、"*"、"["或"]"特殊字符,否则导出的Excel无法打开,会报错,原因是Excel的sheet页会把表名称

当sheet的名称来用,而sheet名称是有要求的

5.根据Button里构造函数中的这句话

  self.setComponent(self.store || self.component || self.up("gridpanel") || self.up("treepanel"), config);

以为应该是支持treepanel的,但是根据我的测试如果是treepanel,在Worksheet.js中

buildRows: function () {
    var rows = [];

  // 如果是treepanel以下代码无法执行
    this.store.each(function (record, index) {
      rows.push(this.buildRow(record, index));
    }, this);
    return rows;
  }

以上红色代码段是无法执行的,原因是因为TreeStore没有each方法。当然如果在这里修改一下让他执行应该也是可以导出的,因为时间原因没有修改,如果有需要的话自行修改吧。

以上就是我个人在使用Extjs4.2前台导出Excel过程中总结的经验,以备不时之需~~~~~~~

Extjs4.2纯前台导出Excel总结的更多相关文章

  1. 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南

    JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...

  2. 6行代码实现纯js导出excel

    // excel导出当前列表 function memberExport() { var oHtml = $('#list').html(); var excelHtml = '<html> ...

  3. extjs4 前台导出grid数据 生成excel,数据量大后台无法接收到数据

    最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...

  4. 如何使用JavaScript实现纯前端读取和导出excel文件

    js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...

  5. asp.net ashx导出excel到前台

    最近有一个项目使用以前的ashx,不能使用FileResult,只有通过response返回拼接好的字符串.但是通过查阅资料拼接的字符串总是提示文件格式不匹配,虽然能正常打开,但是体验很不好,在此总结 ...

  6. 关于导出Excel

    Asp.Net 在刚毕业那会,做项目全是服务器控件.导出Excel的代码也很简单,在button触发后台事件后,后台生成一个excel文件,然后读取成字节,输出到客户端. Response.AddHe ...

  7. 选择性导出excel表中内容

    package com.huawei.utils; import java.io.FileNotFoundException;import java.io.FileOutputStream;impor ...

  8. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

  9. [转]Java中导入、导出Excel

    原文地址:http://blog.csdn.net/jerehedu/article/details/45195359 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样 ...

随机推荐

  1. taskkill批量删除进程命令

    本人自用: TASKKILL /F /IM notepad --强制删除进程名中带notepad的所有进程 TASKKILL [/S system [/U username [/P [password ...

  2. IE6中常见兼容性问题及浏览器显示难题

    1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...

  3. 架构设计:负载均衡层设计方案(7)——LVS + Keepalived + Nginx安装及配置

    1.概述 上篇文章<架构设计:负载均衡层设计方案(6)——Nginx + Keepalived构建高可用的负载层>(http://blog.csdn.net/yinwenjie/artic ...

  4. php 类 成员变量 $this-&gt;name=&#39;abc&#39;

    <?php class test { public function getName() { $this->name='abc'; echo $this->name; } }$a=n ...

  5. UVA 1623 Enter The Dragon

    题意: 一只龙,在每个不下雨的日子都可以喝干一个湖里的水,当湖满时,再向这个湖里下雨就会溢出.给出下雨的顺序,求龙喝水的序列. 分析: 记录每个湖上次满水的日子,和不下雨的日子.下雨时,查找当前湖上次 ...

  6. SharePoint 2013 母版页修改后,无法添加应用程序

    原文:SharePoint 2013 母版页修改后,无法添加应用程序 问题描述:前一段时间尝试了一下将HTML文件转换为母版页,但是,用着用着又发现新的问题,我们转换的母版页,设置成默认母版页以后,无 ...

  7. apacheds的客户端

    Apache DS管理的JAVA实现 LdapConnection connection = new LdapNetworkConnection("localhost", 1038 ...

  8. HQL详解

    HQL查询:Criteria查询对查询条件进行了面向对象封装,符合编程人员的思维方式,不过HQL(Hibernate Query Lanaguage)查询提供了更加丰富的和灵活的查询特性,因此 Hib ...

  9. openssl enc(对称加密)

    openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 对称加密工具.了解对称加密的原理后就很简单了,原理部分见下文. openss ...

  10. c++继承实例

    #include <iostream> #include <vector> #include <string> using namespace std; class ...