hdztroop 2024-02-20 19:01 采纳率: 100%
浏览 5
已结题

html模板数据导出到excel的问题

在Django中有一个html模板,用于显示数据,在显示完成后希望通过JavaScript命令将模板上的表格导出到excel文件中,已添加了xlsx.full.min.js包,数据显示也没问题,但是点击页面上button,没有任何相应,请各位指点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>年度实践环节经费预算统计表</h2>
    <hr>
    <table align="center" border="1" id="TableToExport">
        <tr>
            <th>环节名称</th>
            <th>周数</th>
            <th>学分</th>
            <th>专业</th>
            <th>班级</th>
            <th>人数</th>
            <th>实习地点</th>
            <th>实习形式</th>
            <th>标准</th>
            <th>经费预算</th>
            <th>指导教师人数</th>
            <th>备注</th>
        </tr>
        {% for budget in budgets %}
            <tr>
                <td>[{{ budget.classID }}]{{ budget.name }}</td>
                <td>{{ budget.weeks }}</td>
                <td>{{ budget.mark }}</td>
                <td>{{ budget.get_major_display }}</td>
                <td>{{ budget.banji }}</td>
                <td>{{ budget.number }}</td>
                <td>{{ budget.get_location_display }}</td>
                <td>{{ budget.get_practiceType_display }}</td>
                <td>{{ budget.budgetStandard }}</td>
                <td>{{ budget.total_budget }}</td>
                <td>{{ budget.teachers }}</td>
                <td>{{ budget.get_semester_display }}</td>
            </tr>
        {% endfor %}
    </table>
    <button id="sheetjsexport"><b>Export as XLSX</b></button>
    <script src="xlsx.full.min.js"></script>
    <script>
        document.getElementById("sheetjsexport").addEventListener('click', function() {
          /* Create worksheet from HTML DOM TABLE */
          let wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
          /* Export to file (start a download) */
          XLSX.writeFile(wb, "SheetJSTable.xlsx");
        });
    </script>
</body>
</html>


  • 写回答

2条回答 默认 最新

  • GISer Liu 2024-02-20 19:32
    关注

    该回答引用自GPT-3.5,由博主GIS_Liu编写:

    问题分析:

    1. 页面上点击按钮没有任何响应,导致无法将表格数据导出到Excel文件。
    2. 已经添加了xlsx.full.min.js包,并且数据在页面上显示正常。

    解决思路与方案:

    1. 确保JavaScript代码能够正确执行,并且能够触发点击按钮事件。
    2. 确认XLSX工具是否正确加载,以及是否正确调用了相关函数。
    3. 如果点击按钮没有任何响应,可能是因为JavaScript代码存在错误或者按钮事件未正确绑定。

    针对这个问题,我提供以下解决方案:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h2>年度实践环节经费预算统计表</h2>
    <hr>
    <table align="center" border="1" id="TableToExport">
        <tr>
            <th>环节名称</th>
            <th>周数</th>
            <th>学分</th>
            <th>专业</th>
            <th>班级</th>
            <th>人数</th>
            <th>实习地点</th>
            <th>实习形式</th>
            <th>标准</th>
            <th>经费预算</th>
            <th>指导教师人数</th>
            <th>备注</th>
        </tr>
        {% for budget in budgets %}
        <tr>
            <td>[{{ budget.classID }}]{{ budget.name }}</td>
            <td>{{ budget.weeks }}</td>
            <td>{{ budget.mark }}</td>
            <td>{{ budget.get_major_display }}</td>
            <td>{{ budget.banji }}</td>
            <td>{{ budget.number }}</td>
            <td>{{ budget.get_location_display }}</td>
            <td>{{ budget.get_practiceType_display }}</td>
            <td>{{ budget.budgetStandard }}</td>
            <td>{{ budget.total_budget }}</td>
            <td>{{ budget.teachers }}</td>
            <td>{{ budget.get_semester_display }}</td>
        </tr>
        {% endfor %}
    </table>
    <button id="sheetjsexport"><b>Export as XLSX</b></button>
    <script src="xlsx.full.min.js"></script>
    <script>
        document.getElementById("sheetjsexport").addEventListener('click', function() {
            /* Create worksheet from HTML DOM TABLE */
            let wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"));
            /* Export to file (start a download) */
            XLSX.writeFile(wb, "SheetJSTable.xlsx");
        });
    </script>
    </body>
    </html>
    

    这段代码看起来没有明显的错误,但是我们可以尝试进行以下检查和调试:

    1. 确保xlsx.full.min.js文件路径正确,可以尝试在浏览器控制台检查是否有加载成功的提示。
    2. 使用浏览器的开发者工具(F12)来查看是否有JavaScript错误,以及点击按钮是否有触发相应的事件。
    3. 可以尝试将JavaScript代码中的事件监听改为直接在按钮标签上添加onclick属性来调用导出函数,以排除事件绑定的问题。

    根据以上解决思路和调试方法,可以尝试修复页面点击按钮没有任何响应的问题。

    如果该回答解决了您的问题,请采纳!如果没有,请参考以下方案进行修订

    用户答题指南

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月28日
  • 已采纳回答 2月20日
  • 创建了问题 2月20日

悬赏问题

  • ¥15 Apache显示系统错误3该如何解决?
  • ¥30 uniapp小程序苹果手机加载gif图片不显示动效?
  • ¥20 js怎么实现跨域问题
  • ¥15 C++dll二次开发,C#调用
  • ¥15 请教,如何使用C#加载本地摄像头进行逐帧推流
  • ¥15 Python easyocr无法顺利执行,如何解决?
  • ¥15 为什么会突然npm err!啊
  • ¥15 java服务连接es读取列表数据,服务连接本地es获取数据时的速度很快,但是换成远端的es就会非常慢,这是为什么呢
  • ¥15 vxworks交叉编译gcc报错error: missing binary operator before token "("
  • ¥15 JSzip压缩文件时如何设置解压缩密码