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

时间:2022-12-17 22:32:12

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){

}
}