使用xlsx.js将表格中的数据导出为excel

最新推荐文章于 2024-04-15 14:04:12 发布

拿屎打雪仗

最新推荐文章于 2024-04-15 14:04:12 发布

阅读量561

点赞数

文章标签： excel

本文链接：https://blog.csdn.net/weixin_52183261/article/details/132847643

版权

先导入xlsx.js，github仓库在下面

https://github.com/SheetJS/sheetjs

测试用的jsp如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目信息浏览</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Custom-Files -->
    <!-- //Custom-Files -->

    <script src="xlsx.js"></script>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        function btn_export() {
            var table1 = document.querySelector("#table1");
            var sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
            openDownloadDialog(sheet2blob(sheet),'下载.xlsx');
        }

        // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
        function sheet2blob(sheet, sheetName) {
            sheetName = sheetName || 'sheet1';
            var workbook = {
                SheetNames: [sheetName],
                Sheets: {}
            };
            workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

            var wopts = {
                bookType: 'xlsx', // 要生成的文件类型
                bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                type: 'binary'
            };
            var wbout = XLSX.write(workbook, wopts);
            var blob = new Blob([s2ab(wbout)], {
                type: "application/octet-stream"
            }); // 字符串转ArrayBuffer
            function s2ab(s) {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
            }
            return blob;
        }

        function openDownloadDialog(url, saveName) {
            if (typeof url == 'object' && url instanceof Blob) {
                url = URL.createObjectURL(url); // 创建blob地址
            }
            var aLink = document.createElement('a');
            aLink.href = url;
            aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
            var event;
            if (window.MouseEvent) event = new MouseEvent('click');
            else {
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            }
            aLink.dispatchEvent(event);
        }
    </script>


</head>
<body>
<div class="container" style='margin-top:30px;width:auto;height:800px;overflow-x:auto;overflow-y:auto'>
    <!--查询 -->
    <form class="layui-form" action="${pageContext.request.contextPath}/project/loadRank">
        <div class="layui-form-item">
            <label class="layui-form-label">比赛</label>
            <div class="layui-input-inline">
                <select name="match" lay-verify="required" >
                    <c:forEach items="${matchList}" var="match" varStatus="s">
                        <option value="${match.title}">${match.title}</option>
                    </c:forEach>
                </select>
            </div>
            <button class="layui-btn" lay-submit lay-filter="formDemo">获取</button>
        </div>
    </form>


    <!-- 表格 -->
    <table id="table1" >
        <!-- 列宽度 -->
        <colgroup>
            <col width="50">
            <col width="50">
            <col width="110">
            <col width="110">
            <col width="110">
            <col width="110">
            <col width="120">
            <col>
        </colgroup>
        <!-- 表头 -->
        <tr class="info" style=" text-align: center;">
            <th lay-size="5px">排名</th>
            <th>名称</th>
            <th>参加比赛名称</th>
            <th>项目类型</th>
            <th>学校</th>
            <th>负责人</th>
            <th>联系电话</th>
            <th>成员</th>
            <th>申请日期</th>
            <th>项目描述</th>
            <th>分数</th>
        </tr>


        <c:forEach items="${projects}" var="project" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${project.title}</td>
                <td>${project.match}</td>
                <td>${project.type}</td>
                <td>${project.college}</td>
                <td>${project.person}</td>
                <td>${project.phone}</td>
                <td>${project.member}</td>
                <td>
                    <fmt:formatDate value="${project.date}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>
                <td>${project.desc}</td>
                <td>${project.score}</td>
            </tr>
        </c:forEach>
    </table>

    <button class="layui-btn-radius" onclick="btn_export()">导出excel文档</button>
</div>

<script src="../js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
</div>
</body>
</html>

原文：xlsx.js 实现前端 table 数据导出并下载为 excel_一条菜鸟鱼的博客-CSDN博客