导出学生信息到 Excel
实现学生信息的 Excel 导出功能（按班级导出）
在上一节中，我们已经完成了学生信息 Excel 的批量导入。 这一节，我们继续完善学生管理模块，实现另一个在后台系统中非常常见、也非常实用的功能——学生信息导出。
为什么要“按班级导出”？
在最直观的设计中，导出功能通常是这样的：
- 用户逐条勾选学生
- 点击“导出”
- 生成 Excel 文件
但这种方式存在两个明显问题：
- 用户体验差：学生数量一多，勾选非常繁琐
- 实现复杂度高：前端需要维护选中状态，逻辑冗余
在实际项目中，更合理、更常见的方案是：
按班级导出学生信息
也就是说，用户只需要选择一个班级（例如“一年一班”），点击导出按钮，系统就会自动把该班级下的所有学生信息一次性导出为 Excel 文件。
这里还有一个非常关键的设计原则：
导出的数据，直接来源于数据库查询，而不是前端筛选结果。
只要学生的班级属于“一年一班”，就一定会被导出，避免前后端数据不一致的问题。
明确了整体思路之后，我们开始一步步实现。
一、定义导出接口 URL
和导入功能类似，导出功能同样需要一个独立的接口。
在 urls.py 中新增一个 URL，例如：
- 接口名：
export_excel - 命名原则：语义清晰、前后统一
这个接口专门用于处理学生信息的导出请求。
代码如下：
from django.urls import path
from .views import (StudentListView,StudentCreateView, StudentUpdateView, StudentDeleteView,
StudentBulkDeleteView, upload_student, export_excel)
urlpatterns = [
path('upload_student', upload_student, name='upload_student'),
path('export_excel', export_excel, name='export_excel')
]
二、准备前端：监听“导出”按钮
接下来回到学生列表页面。
页面中添加一个「导出」按钮，其 id 为 export，因此我们可以直接监听它的点击事件。
<div class="actions">
<button type="button" class="add" id="add">新增</button>
<button type="button" class="del" id="del-all">批量删除</button>
<button type="button" class="import" id="import">导入</button>
<button type="button" class="export" id="export">导出</button>
</div>
导出前的第一步：校验班级是否选择
由于导出是基于班级的，所以在真正发起请求之前，必须先检查一件事：
用户是否选择了班级？
班级是一个下拉框（select），我们可以通过：
// 导出excel
document.getElementById('export').addEventListener('click', function() {
// 检查是否选择了班级
var select = document.querySelector('select[name="grade"]');
var value = select.value;
var gradeText = select.options[select.selectedIndex].text;
if (!value) {
Swal.fire({
title: '错误!',
text: '请选择一个班级!',
icon: 'error',
confirmButtonText: '确定'
});
return ;
}
})
在没有选择班级的情况下，点击导出按钮，效果如下：
三、动态加载班级数据（关键修正点）
班级下拉框中的班级数据不应该写死，而应该从grade表中筛选。因此我们需要：
👉 从后端动态传递班级数据到模板中。
后端处理方式
继续阅读完整内容
以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。
查看课程详情