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">

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请求

　　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;
}

结果就是如下：