使用JavaScript将Html table导出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

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

使用JavaScript将Html table导出Excel

猜你喜欢