使用JavaScript将Html table导出Excel

时间:2024-10-30 07:58:04
 
2020-12-08 更新
感谢兄弟@think_zhao 的探索发现有这样的一个工具可以比较完美生成Excel:/sheetjs/js-xlsx
时间证明了我的愚昧,以下内容过期仅供参考。
 
 
Excel导出的话,因为纯前端导出,IE有工具会提示安全问题,但是仅限IE。谁叫Office是IE的兄弟呢。
一、纯前端(原理是利用Excel可以打开HTML格式,改了后缀。不是真正意义上的Excel文件)
1、纯JS(兼容性有问题,谷歌可用)
介绍:基本没有配置,不能导出表格的格式。具体样式可以去工具包里面看修改,兼容性有毛病。仅供参考,不建议使用。
一行代码即可:( "tableId");
 
DEMO下载
/detail/wocao003/9739729
 
 
2、JQuery-table2excel(Firefox、Chrome、Safari、IE10、11)
介绍:简单的配置,可以导出表格格式。但是只支持内联样式,不支持class等选择器引入的样式。
http:///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下载
/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>-table-to-excel</groupId>
    <artifactId>gwt-table-to-excel</artifactId>
    <version>0.0.4</version>
</dependency>
 
maven: /artifact/-table-to-excel/gwt-table-to-excel/0.0.4
官方介绍: /archive/p/gwt-table-to-excel/
可惜Demo找不到,也没找到正式的文档,不过在找文档的过程中发现国产的,内容还不错。
重点讲下面的,返回来写这篇的时候这个的用法应该和下面的用法差不多。
 
2、table-to-xls
介绍:Java实现,HTML table转换为Excel,支持大部分样式。
/p/table-to-xls
 
后台代码:
 
@RequestMapping(value="/")
    public void getExcelTest(HttpServletRequest request,HttpServletResponse response) throws IOException {
        try{
        StringBuilder table = new StringBuilder();
        (("table"));
        ("application/-excel");
        ("UTF-8");
        ("Content-Disposition", "attachment;filename=");
        ().write((table));
        }catch (Exception e){
            error("获取导出Excel内部异常",ErrorCode.UNKNOWN_EXCEPTION,e);
            (response,false,"获取导出Excel内部异常",e);
        }
    }
Maven:
  
 <!--HTML转成Excel输出-->
        <dependency>
            <groupId></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>");
        ('action',reqUrl);
        ('method','post');
        for(var key in params){
            var dyinput = $("<input type='hidden' name='"+key+"' />");
            ("value",params[key]);
            (dyinput);
        }
        ('display','none');
        ("body");
        ();
        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
走过路过有可以留下你的见解