web开发——写一个简单的表格导出操作

一、前台页面：

主要是一个按钮和一个表格，表格有显示数据，按钮负责将表格中的数据选择性地导出。除此外，可以附加一个小窗口和进度条，用于显示下载进度。

1. 按钮：<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-redo" data-options="plain:true" id="btn-exp" onclick="fun_export()">导出详细信息</a>

2.表格：<div id="dataGrid" style="margin-bottom:5px;margin-top:1px">

<table id="dg" data-options="toolbar:'#tb'"></table>
</div>

3.进度条和小窗口
<div id="win" class="easyui-window" title="下载中" style="width: 500px; height: 80px" data-options="iconCls:'icon-save',modal:true">
<div id="p" class="easyui-progressbar" data-options="value:10" style="width:400px;margin-top:10px;margin-left:50px;"></div>
</div>

4.下载框：<iframe id="bgfileDownFrame" src="" style="display:none; visibility:hidden;"></iframe>

二、jS请求

<script>

function fun_export(){
$('#win').window('open');
setProgress();

//AJAX请求
$.ajax({
url:'${pageContext.request.contextPath}/media/getExl.action', //TODO
data:{},
type: 'post',
dataType:"json",
success: function(data){
// alert("导出！！！！！");
if(data.isSuccess == "true"){
$("#bgfileDownFrame").attr("src","${pageContext.request.contextPath}/media/downloadExl.action?docToken="+data.token);
value = 100;
setProgress();
$('#win').window('close');
}

else{
$('#win').window('close');
alert("生成统计表出错！");
}
},
});
}

//设置进度条的值
function setProgress(){
var value = $('#p').progressbar('getValue');
if (value < 100){
value += Math.floor(Math.random() * 20);
$('#p').progressbar('setValue', value);
setTimeout(arguments.callee, 200);
}
} </script>

三、action请求方法：

@Action(value="getExl")
public String getExl(){

Map<String,String> result = new HashMap<String,String>();
result.put("isSuccess", "false");

/* 数据来源*/
Map<String, Object> dataMap = new HashMap<String, Object>();//导出结果
List<Map<String, Object>> resultTable1 = mediaManageBPO.getMediaInfo();
dataMap.put("rows", resultTable1);
//路径
String webPath = this.request.getSession().getServletContext().getRealPath("");
MDoc mdoc = new MDoc();
try {

String tmpFileDir = webPath + File.separator +"docTemplate";
//检查临时文件夹是否存在

Util.checkDirExist(tmpFileDir);
//20161227105212956742620
String fileToken = Util.generateTmpFileName(tmpFileDir);

//fileToken 是生成的临时文件名
String docTemplatePath = webPath + File.separator +"docTemplate" + File.separator + fileToken;

//media.ftl是模板文件，先根据xls文件--另存为xml文件--eclipse下再重命名为ftl文件
String templateName = "media.ftl";

mdoc.createXls(dataMap, docTemplatePath,templateName);
result.put("isSuccess", "true");
result.put("token", fileToken);
this.request.getSession().setAttribute("DownloadFile","数据统计表"+UtilsLXJ.getDate());
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

outputJson(result);

return NONE;
}
//下载
@Action(value="downloadExl")
public String downloadExl(){
//数据统计表20161227105333.xls
String downloadName = (String)this.request.getSession().getAttribute("DownloadFile");
if(Util.trim(downloadName).isEmpty()){
downloadName = "数据统计.xls";
}else{
downloadName = downloadName + ".xls";
}
try {
OutputStream os = this.response.getOutputStream();

if (Util.isIE(this.request)) {
downloadName = URLEncoder.encode(downloadName, "utf-8");
} else {
downloadName = new String(downloadName.getBytes("utf-8"),
"iso-8859-1");
}
this.response.setContentType("application/x-download");
this.response.addHeader("Content-Disposition",
"attachment;filename=\"" + downloadName + "\"");
this.response.flushBuffer();

String webPath = this.request.getSession().getServletContext().getRealPath("");
//tmpFileDir临时文件的位置
String tmpFileDir = webPath + File.separator +"docTemplate";
//临时文件后面加上文件token
String bgFile = tmpFileDir + File.separator + docToken;//docToken是从getExl action那里传来的
FileInputStream fis = new FileInputStream(bgFile);
//输出
Util.copyStrem(fis, os);
fis.close();
os.close();
//删除临时文件
Util.delFile(bgFile);

} catch (IOException e) {
e.printStackTrace();
}
return NONE;
}

结果就是如下：