IE中在js中将查询出的数据导出excel表格

<input style="width: 70px; height: 22px;margin-left: 10%;font-family: \"微软雅黑\" ; font-size: 12px; color:#2587D2 " type="button" onclick="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添加到受信任的网站里关闭

猜你喜欢

转载自blog.csdn.net/qq_23876213/article/details/81068388