使用浏览器默认下载方式导出表格

最新推荐文章于 2024-08-02 18:21:33 发布

键盘哥

最新推荐文章于 2024-08-02 18:21:33 发布

阅读量2.7k

点赞数

分类专栏：导出excel 文章标签：前端导出excel 浏览器

本文链接：https://blog.csdn.net/Gaowahaha/article/details/70257447

版权

导出excel 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.首先是在前端取表格的数据，同时设置表格的样式
其中.jsp中的样式为：

<body>
<input type="button" value="导出" onclick="btnExcel()">
<form id='formAction' action="firstservlet?time=new Date()"  method="post">    
     <input id="hlf"  name='hfs'  type="hidden"/>  
     <input id="type" name='type' type="hidden"/>  
</form>
 <table id="test" style="width:400px;font-size: 12px;text-align:center;"  border="1"  cellspacing="0" bordercolor="black">
    <tr>
       <th>一一</th><th>一二</th><th>一三</th><th>一四</th><th>五</th>
    </tr>
     <tr>
       <td>二一</td><td>二二</td><td>二三</td><td>二四</td><td>五</td>
    </tr>
     <tr>
       <td>三一</td><td>三二</td><td>三三</td><td>三四</td><td>五</td>
    </tr>
     <tr>
       <td>四一</td><td>四儿</td><td>四三</td><td>四四</td><td>五</td>
    </tr>
     <tr>
       <td>五一</td><td>五二</td><td>五三</td><td>五四</td><td>五</td>
    </tr>
</table> 
</body>

.js文件为

<script type="text/javascript">
var tableData='<table cellspacing="0" class="pb" border="2">';
function btnExcel(){
    var table=document.getElementById("test");
    var rows=table.rows.length;
    tableData+='\n<tr>';
    for(var j=0;j<table.rows[0].cells.length;j++){
        tableData+='\n<th>';
        tableData+=table.rows[0].cells[j].innerHTML;
        tableData+='</th>';
    }
    tableData+='</tr>';

    for(var i=1;i<rows;i++){
        tableData+='\n<tr>';
        for(var j=0;j<table.rows[i].cells.length;j++){
            tableData+='\n<td>'+table.rows[i].cells[j].innerHTML+'</td>';
        }
        tableData+='</tr>';
    }
    tableData+='</table>';
    alert(tableData);
     document.getElementById("hlf").value=tableData;
    document.getElementById("formAction").submit();
}

 /*   $.ajax({ 
                    type:'POST',  
                    url:'firstservlet?time=new Date()', 
                    data:{"condition":tableData},
                    dataType:'text',  
                    success:function(){
                       alert("导出成功");
                    },  
                    error: function(){
                        alert("导出失败"); 
                    }  
        }); */
</script>

后台逻辑部分

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
         String path=req.getSession().getServletContext().getRealPath("/");
         System.out.println("当前路径是："+path);
        // System.out.println("这是后台的Exportss.do方法，不要迷路啊！！亲");
         String testData="";
         String tableName="";
         testData+=req.getParameter("hfs");
         tableName=req.getParameter("name");
            Date date = new Date();
                 SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
                 tableName+=sdf.format(date)+".xls";
                 resp.reset();// 清空输出流  
                  try {
                      resp.setHeader("Content-disposition", "attachment; filename="+java.net.URLEncoder.encode(tableName, "UTF-8")+"");  
                      resp.setContentType("application/msexcel;charset=utf-8");   
                } catch (UnsupportedEncodingException e1) {
                    // TODO Auto-generated catch block
                    e1.printStackTrace();
                }
                  PrintWriter out;  
                  try {
                    out = resp.getWriter();
                    // System.out.println("out是："+out);
                      out.println(testData);  
                      out.close();
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } 
}

需要注意的坑：
.js中获取数据后要把它赋给一个,然后以form表单的形式提交到后台，只有这样才可以以默认的浏览器下载方式下载，
如果采用ajax向后台传值的话，则无法出现效果！
最后下载的效果：
这里写图片描述
补充：
也可以在js中设置表格的样式（以下代码与上方的不相关，仅作记录格式使用）

<table id="sdlAnalysis"  class="table"  style="width:400px;font-size: 12px;text-align:center;"  border="1"  cellspacing="0" bordercolor="black" >

<tr style="height: 30px;">
 <td rowspan="11">土地利用现状</td>
 <td colspan="3">申请用地总面积</td>
  <tr style="height: 20px;">

从datagrid中获取数据：

            daochu:function(){
                try{                
                 var tableData='<table cellspacing="0" class="pb" border="2">';
                 tableData+='\n<tr>';
                 var tableName='';
                 var tableArray=[];
                 //获取列
                 var opts = $(this.tableId).datagrid('getColumnFields');
                 //获取表头和表头属性
                 for(var i=1;i<opts.length;i++){
                     var col = $(this.tableId).datagrid( "getColumnOption" , opts[i] );
                     tableData+='\n<th>';
                     tableData+=col.title;
                     tableData+="</th>";
                    // tableArray.push(col.title);
                     tableArray[i]=opts[i];
                 }
                 tableData+='</tr>';
                /* for(var i=0;i<tableArray2.length;i++){
                     tableData+=tableArray2[i]+",";
                 }*/
                 /*for(var i=0;i<tableArray.length;i++){
                     tableData+='\n<th>';
                     tableData+=tableArray[i];
                     tableData+="</th>";             
                 }*/
                var table=$(this.tableId).datagrid("getRows");//获取当前页的所有行 
                for(var i=0;i<table.length;i++){
                   tableData+='\n<tr>';
                    for(var j=1;j<tableArray.length;j++){
                        if(table[i][tableArray[j]]!=null){
                                tableData+='\n<td>'+table[i][tableArray[j]]+'</td>';   

                        }else{
                            tableData+='\n<td>'+'暂无数据'+'</td>';
                        }                                       
                    }
                    tableData+='</tr>';
                }
                tableData+='</table>';
                 document.getElementById("hlf").value=tableData;
                var ss=document.getElementById("hlf").value ;
                // alert("sss");
                 document.getElementById("formAction").submit();                                  
                }catch(ex){

                }
            }

键盘哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用浏览器默认下载方式导出表格

1.首先是在前端取表格的数据，同时设置表格的样式其中.jsp中的样式为：<body><input type="button" value="导出" onclick="btnExcel()"><form id='formAction' action="firstservlet?time=new Date()" method="post"> <input id="hlf"
复制链接

扫一扫

专栏目录