table2excel.js导出数据与django结合

最新推荐文章于 2022-05-05 22:17:43 发布

热爱生活的小娜娜

最新推荐文章于 2022-05-05 22:17:43 发布

阅读量211

点赞数 1

分类专栏： Django JS 文章标签： js django

本文链接：https://blog.csdn.net/weixin_49220417/article/details/111727383

版权

Django 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

链接：https://pan.baidu.com/s/1DgPXTK54hRJqBWxEmx1Bgg
提取码：007l

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息</title>
    <!-- 设置标题中的图标 -->
    <link type="image/x-icon" rel="icon" href="{% static 'images/ilync.ico' %}"/>
    <!-- 引入外部的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'css/index.base.css' %}">
    <!-- 引入jquery文件  -->
    <script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'js/table2excel.js' %}"></script>
    <style>
        .btnEixt {
            background-color: #a9c3cd;
            border: 0.5px;
            width: 100px;
            height: 50px;
            border-radius: 12%;
            font-size: 20px;
            margin-left: 20px;
        }

        .btnEixt:hover {
            background-color: rgb(117, 200, 221);
        }
    </style>
</head>
<body>
<!-- 页面标题 -->
<div class="header">
    <div class="header_center">
        <img src="{% static 'images/logo.png' %}">
        <div>学生成绩管理系统</div>
    </div>
</div>
{# 展示学生姓名#}
<div class="userNameCenter">
    <h2>姓名:{{ stuName }}</h2>
    <a href="http://127.0.0.1:8000/">
        <button class="btnEixt">退出</button>
    </a>
     <button id="export"  class="btnEixt" >导出成绩</button>
</div>
<div class="content">
    <table class="table table-striped table-bordered table-hover" id="data">
        <thead>
        <tr>
            <th>课程名称</th>
            <th>成绩</th>
            <th>教师名称</th>
        </tr>
        </thead>
        <tbody>
  
            <tr>
                <td>{{ JS }}</td><!-- 课程-->
                <td>{{ 98 }}</td><!-- 成绩-->
                <td>{{ teacher }}</td><!-- 教师名称-->
            </tr>

        </tbody>
    </table>
</div>
</div>
</body>
</html>
<script>
    var table2excel = new Table2Excel();
            document.getElementById('export').addEventListener('click', function() {
                table2excel.export(document.getElementById('data'));
            });
</script>