前端：页面表格导出Excel

Excel导出的话，因为纯前端导出，IE有工具会提示安全问题，但是仅限IE。谁叫Office是IE的兄弟呢。

一、纯前端（原理是利用Excel可以打开HTML格式，改了后缀。不是真正意义上的Excel文件）

1、纯JS（兼容性有问题，谷歌可用）

介绍：基本没有配置，不能导出表格的格式。具体样式可以去工具包里面看修改，兼容性有毛病。仅供参考，不建议使用。

一行代码即可：ExcelUtils.exportExcel("tableId");

DEMO下载

http://download.csdn.net/detail/wocao003/9739729

2、JQuery-table2excel（Firefox、Chrome、Safari、IE10、11）

介绍：简单的配置，可以导出表格格式。但是只支持内联样式，不支持class等选择器引入的样式。

http://www.jq22.com/jquery-info6688

网站的Demo就不能用，果断放弃治疗。不知道是不是打开方式不正确，和Office2013有关？网上有WPS2016打开没问题的。

本地Demo：

 $(".table").table2excel({                exclude: ".noExl",//不导出的表格数据选择器，不导出的数据加class加上 noExl就可以了                name: "Excel Document Name",                filename: "myFileName",                fileext: ".xls",                exclude_img: true,                exclude_links: true,                exclude_inputs: true            });

DEMO下载

http://download.csdn.net/detail/wocao003/9739732

因为纯前端的导出都是耍流氓，所以都会出现：

二、纯后端（24K纯Excel，但是代码去另外控制表格和样式有点蛋疼）

1、POI 等工具代码生成（左蛋疼）

2、POI等工具根据模板生成（右蛋疼）

三、前后端结合

1、gwt-table-to-excel

介绍：谷歌出品，GWT module to allow to export a table, without needing to write any server-side code。意思就是说用了这个工具很牛逼，服务端代码都不用写了。

<dependency>    <groupId>com.googlecode.gwt-table-to-excel</groupId>    <artifactId>gwt-table-to-excel</artifactId>    <version>0.0.4</version></dependency>

maven：http://mvnrepository.com/artifact/com.googlecode.gwt-table-to-excel/gwt-table-to-excel/0.0.4

官方介绍：https://code.google.com/archive/p/gwt-table-to-excel/

可惜Demo找不到，也没找到正式的文档，不过在找文档的过程中发现国产的，内容还不错。

重点讲下面的，返回来写这篇的时候这个的用法应该和下面的用法差不多。

2、table-to-xls

介绍：Java实现，HTML table转换为Excel，支持大部分样式。

http://www.oschina.net/p/table-to-xls

后台代码：

 

@RequestMapping(value="/getExcelTest.do")    public void getExcelTest(HttpServletRequest request,HttpServletResponse response) throws IOException {        try{        StringBuilder table = new StringBuilder();        table.append(request.getParameter("table"));        response.setContentType("application/vnd.ms-excel");        response.setCharacterEncoding("UTF-8");        response.setHeader("Content-Disposition", "attachment;filename=excel.xls");        response.getOutputStream().write(TableToXls.process(table));        }catch (Exception e){            error("获取导出Excel内部异常",ErrorCode.UNKNOWN_EXCEPTION,e);            ResponseHelper.printOut(response,false,"获取导出Excel内部异常",e);        }    }

Maven：

  

 <!--HTML转成Excel输出-->        <dependency>            <groupId>me.chyxion</groupId>            <artifactId>table-to-xls</artifactId>            <version>0.0.1-RELEASE</version>        </dependency>

页面代码：略。（正常的Table，样式内联即可）

JS代码：

 

/**     *  Ajax服务器返回格式没有文件，比如说Excel根据条件导出，用这个工具传入参数，然后服务器后端返回文件流。     * @param reqUrl 地址     * @param params 参数     * @param callback 回调函数     */    var  postRequest = function(reqUrl,params,callback){        if($("#postForm").length>0){            $("#postForm").remove();        }        var dyform = $("<form id='postForm'></form>");        dyform.attr('action',reqUrl);        dyform.attr('method','post');        for(var key in params){            var dyinput = $("<input type='hidden' name='"+key+"' />");            dyinput.attr("value",params[key]);            dyform.append(dyinput);        }        dyform.css('display','none');        dyform.appendTo("body");        dyform.submit();        if($.isFunction(callback)){            callback();        }    };postRequest(URL, {"table":"<table></table>"});

注意问题：

a)样式只能内联

b)导出Excel颜色会有色差，一般经典的颜色色差比较小，比如yellow

style="background-color: #00FF00"; /**不支持这种颜色格式*/

style="background-color: rgb(128,194,105);"/**支持*/

style="background-color: #0F0"/**支持*/

c)只能用post方法传表格的HTML代码到服务器，有些服务器对post长度支持有限，如果表格很大而且样式多，那么这样的数据长度很容易后台接受不来。但是可以改成post的长度限制。

总结：能后端处理的尽量不要用前端导出，体验不是很好，Java工具推荐EasyPoi

走过路过有可以留下你的见解