<input style="width: 70px; height: 22px;margin-left: 10%;font-family: \"微软雅黑\" ; font-size: 12px; color:#2587D2 " type="button" οnclick="move('execelWin','moveByOperator.app')" value="导出Excel"/>
上面这个是导出Excel的按钮
<iframe id="execelWin" width="0" height="0" src=" "></iframe>
js代码(里面查询时间根据自己代码实际情况更改)
function move(id,url){
//获取隐藏的行内框架(因为设置了它的宽和高都为0,所以页面上是不显示的)
var obj = document.getElementById(id);
//如果开始查询出的结果没有或者没有查询
var row = $("#publicPostsTable").find("tr").length;
if(row < 2){
alert("当前无记录,导出失败!");
return;
}
var newUrl = null;
//获取下拉框中的内容
var username=$("#ShiftSearchleaveUserId option:selected").val();
//获取开始查询时间
var dtStart = $("#ShiftSearchbeginDate").val();
//获取结束查询时间
var dtEnd = $("#ShiftSearchendDate").val();
//拼凑出转向控制层的地址,这里也可以设置分页导出(本页面只写了全部导出excel)
newUrl = url + "?usernames=" + username + "&dtStart=" + dtStart + "&dtEnd=" + dtEnd;
//为什么进行两次编码可看https://blog.csdn.net/u012027337/article/details/52126475
newUrl = encodeURI(encodeURI(newUrl));
//将地址附给行内框架,让它在隐藏的区内显示然后进行excel导出操作
obj.src = newUrl;
}
之后写后端 控制层 代码
@RequestMapping("moveByOperator.app")
public ModelAndView moveByOperator(HttpServletRequest request, HttpServletResponse response) {
//获取前端参数
String dtStart = request.getParameter("dtStart");
String dtEnd = request.getParameter("dtEnd");
String usernames = request.getParameter("usernames");
try {
//进行解码
dtStart = URLDecoder.decode(dtStart, "utf-8");
dtEnd = URLDecoder.decode(dtEnd, "utf-8");
usernames = URLDecoder.decode(usernames, "utf-8");
} catch (UnsupportedEncodingException ex) {
Logger.getLogger(OperateRecordController.class.getName()).log(Level.SEVERE, null, ex);
}
Map map = new HashMap<>();
//根据查询条件查询出值班人员的交接班信息
List<ShiftWork> shiftWorkList = sws.getShiftWorkByWhere(usernames, dtStart, dtEnd);
//看记录条数一共有多少条
long num = shiftWorkList.size();
//如果超过20000行,这里在前端js中做了一个判断查询数据过多
if (num > 20000) {
map.put("num", num);
} else {
map.put("num", num);
map.put("shiftWorkList", shiftWorkList);
}
return new ModelAndView("Exc/sheetForExc", map);
}
数据返回到前端
<%--
Document : sheetForExc
Created on : 2018-7-7, 4:10:13
Author : H.L
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>值班记录导出</title>
<!-- <link rel="stylesheet" type="text/css" href="css/common_mw/mw_commons/excel/contactindex.css" />
<link rel="stylesheet" type="text/css" href="css/common_mw/mw_commons/excel/Dialog.css" />-->
<script src="js/common_mw/mw_commons/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="js/common_mw/mw_commons/execl/excCommon.js"></script>
</head>
<body>
<table id="tbid" class="tablist" width="100%">
<thead>
<tr>
<th width="5%">序号</th>
<th width="15%">
<span class="sortName">交班员工</span>
</th>
<th width="20%">
<span class="sortName">接班员工</span>
</th>
<th width="20%">
<span class="sortName">交接班意见</span>
</th>
<th width="60%">
<span class="sortName">交接时间</span>
</th>
</tr>
</thead>
<tbody>
<c:forEach var="u" items="${shiftWorkList}" varStatus="status">
<tr>
<td>${status.index+1} </td>
<td style="text-align: left;width: 10%;">${u.leaveUserId}</td>
<td style="text-align: left;width: 10%;">${u.receiveUserId}</td>
<td style="text-align: left ;width: 50%;height:auto;word-wrap: break-word;word-break: break-all;">${u.advice}</td>
<td style="text-align: left;width: 20%;">${ fn:substring( u.shiftDate , 0,19)}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div id="dataArea"></div>
<script lang="javascript">
window.onload = function() {
//data() 方法向被选元素附加数据,或者从被选元素获取数据
$("#dataArea").data("contentID", "tbid");
$("#dataArea").data("num", parseInt(${num}));
//设不设延时都行,看具体情况
window.setTimeout("exprot()", 1000);
};
</script>
</body>
</html>
excelCommon.js代码如下
function exprot() {
//获取查询出的记录的条数
var num = $("#dataArea").data("num");
if(num > 20000){
// top.showAlert("");
alert("记录大于20000条,导出失败!");
return;
}else if(num===0){
alert("当前无记录,导出失败!");
return;
}
//获取之前赋值的数据
var tableid = $("#dataArea").data("contentID");
//获取table的id
var element = document.getElementById(tableid);
//此对象为 Microsoft 扩展,仅在 Internet Explorer 中受支持
oApplication = new ActiveXObject('Excel.Application');
oApplication.visible = true;
//禁止弹出关对话框
oApplication.DisplayAlerts = false;
//新增工作簿
var xlBook = oApplication.Workbooks.Add;
//创建工作表
oActiveSheet = xlBook.Worksheets(1);
//就将某个区域内的内容,复制到了剪切板中
//语法:clipboardData.setData(sDataFormat, sData)
//参数:sDataFormat:要复制的内容的格式;sData:要复制的内容。
//返回值:复制成功返回true;失败返回false。
window.clipboardData.setData('Text', element.outerHTML);
//粘贴
oActiveSheet.Paste;
}
ie浏览器里要进行一定的设置
在浏览器设置里Internet选项,安全,受信任的站点,自定义级别,找到 ActiveX控件和插件 将下面的选项可以启用的都启用了,最后在 允许剪切板进行编程访问启用,不然只会出来一个空的excel表
最后确定 单击站点,将你的访问的网页ip添加到受信任的网站里关闭