JavaWeb系统后台列表数据导出到excel文件（前端导出）

最新推荐文章于 2023-08-24 11:10:53 发布

zgphacker2010

最新推荐文章于 2023-08-24 11:10:53 发布

阅读量665

点赞数

分类专栏： javascript Java Web 综合

本文链接：https://blog.csdn.net/zgphacker2010/article/details/110503982

版权

Java Web 综合同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

接上一篇文章： Java使用poi导出数据到excel文件（单表或多表导出）

这里我们来实现前端导出功能，也就是直接导出页面列表数据，在再经过后台。

修改list.jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>成绩表</title>
</head>
<body>
<input type="button" id="exportBtn1" style="width: 140px;background-color: blue;color: #FFFFFF;height: 30px;border: none;
    border-radius: 5px;" value="后端导出" />
<input type="button" id="exportBtn2" style="width: 140px;background-color: grey;color: #FFFFFF;height: 30px;border: none;
    border-radius: 5px;" value="前端导出" >
<br>
<br>
<table id="exportTable" border="1" style="width: 500px;text-align: -webkit-center;text-align: center;border-collapse: collapse;">
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <c:forEach items="${requestScope.list}" var="score" varStatus="status" >
        <tr>
            <td>${status.index + 1}</td>
            <td>${score.name}</td>
            <td>${score.chinese}</td>
            <td>${score.mathematics}</td>
            <td>${score.english}</td>
        </tr>
    </c:forEach>
</table>
<div style="display: none">
    <a id="exportTableClick" href="blob:<%=basePath %>0ead79dc-1896-4a53-b1f1-dfbafff4e953" download="成绩表.xls">导出表格</a>
</div>
<script type="text/javascript">
    var rootPath = "<%=basePath %>";
    var exportBtn1 = document.getElementById("exportBtn1");
    exportBtn1.addEventListener("click" , function(){
        alert("后端导出");
        var exportUrl = rootPath + "score/export";
        window.open(exportUrl);
    })

    //前端导出
    var exportBtn2 = document.getElementById("exportBtn2");
    exportBtn2.addEventListener("click" , function(){
        alert("前端导出");
        var mydate = new Date();
        var curr_date = mydate.getDate();
        var curr_month = mydate.getMonth() + 1;
        var curr_year = mydate.getFullYear();
        var month_str = "";
        if (curr_month < 10){
            month_str = "0".concat(curr_month);
        }else{
            month_str = "".concat(curr_month);
        }
        if (curr_date < 10){
            date_str = "0".concat(curr_date);
        }else{
            date_str = "".concat(curr_date);
        }
        var yyyyMMdd = curr_year + "" + month_str +""+ date_str;
        var exportFileName = "成绩表.xls";
        var fullExportFileName = yyyyMMdd.concat(exportFileName);
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("exportTable").outerHTML + "</body></html>";
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var downloadObj = document.getElementById("exportTableClick");
        downloadObj.href = URL.createObjectURL(blob);
        downloadObj.download = fullExportFileName;
        downloadObj.click();
    });

</script>
</body>
</html>

功能截图：

zgphacker2010

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb系统后台列表数据导出到excel文件（前端导出）

接上一篇文章： Java使用poi导出数据到excel文件（单表或多表导出）这里我们来实现前端导出功能，也就是直接导出页面列表数据，在再经过后台。修改list.jsp页面：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><% String p
复制链接

扫一扫