这是一个基于vue前端导出的一种方式、后端只需要提供查询的接口即可、对于常用简单的导出,即简单,又方便,还便捷。
-
点击导出事件
<el-button class="height32" size="small" type="primary" icon="el-icon-download" @click="handleDownload"> 导出 </el-button>
-
执行导出下载方法
handleDownload() {
this.downloadLoading = true // 加载中...
import('@/vendor/Export2Excel').then(excel => { // 需要引入vendor/Export2Excel插件
// 列头
const tHeader = ['班级编号', '班级名称', '开班日期', '结班日期', '班主任', '教室', '学生人数']
//标识列头名称 方便转换:如性别
const filterVal = ['classNo', 'className', 'startDate', 'endDate', 'kcLeader','coursePlace','stuNum']
expClassStuLst(this.listQuery).then(response => { // 调用js查询方法-无分页-根据条件查询方法
const list = response.data
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '班级学员信息',
autoWidth: true,
bookType: 'xlsx'
})
this.downloadLoading = false
})
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'gender') {
return genderOptions[v[j]] // 男女-集合
} else {
return v[j]
}
}))
}
- 效果图