记录:
接口导出Excel表格
1.在js文件中加入后端提供的接口。
因为导出文件流,所以要加后面的 responseType: 'blob'
2.导入js文件至vue文件中。
import 。。。 from ‘。。。.js’
html:
<div style="text-align: center">
<el-button
@click="exportHYStudentList(scope.row)"
size="mini"
v-if="
btnPerm('monitoring_manage_school_manage_exportHy') &&
scope.row.areaCode.indexOf('4201') > -1 &&
(scope.row.payType == 'recharge' || scope.row.isFreight == 1)
"
type="text"
>导出货运报名学员</el-button
>
</div>
<el-dialog
title="选择时间段"
:visible.sync="exportHYStudentDialogVisible"
width="30%"
:close-on-click-modal="false"
class="export-box"
:before-close="exportHYStudentClose"
>
<el-form label-width="90px" :model="exportInfo">
<el-form-item label="导出时间段">
<el-date-picker
style="width: 100%"
v-model="exportDate"
@change="exportChange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="exportHYStudentClose">取 消</el-button>
<el-button type="primary" @click="exportHYStudentInfo">导 出</el-button>
</span>
</el-dialog>
methods:
exportHYStudentClose() {
this.exportHYStudentDialogVisible = false;
this.exportDate = "";
this.exportInfo.startDate = "";
this.exportInfo.endDate = "";
},
async exportHYStudentInfo() {
await exportHYStudentsApi(this.exportInfo).then((res) => {
console.log(res);
var exportType = sessionStorage.getItem("exportType");
var name = exportType.split("=")[1];
var filename = decodeURI(name.substring(0, name.indexOf(".")));
let blob = new Blob([res], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
}); // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); // 创建下载的链接
downloadElement.href = href;
downloadElement.download = filename; // 下载后文件名
document.body.appendChild(downloadElement);
// downloadElement.download = this.exportInfo.schoolName + ".xls"; // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); // 点击下载
document.body.removeChild(downloadElement); // 下载完成移除元素
window.URL.revokeObjectURL(href); // 释放掉blob对象
});
},
exportHYStudentList(row) {
this.exportInfo.schoolId = row.id;
this.exportInfo.schoolName = row.name;
this.exportHYStudentDialogVisible = true;
},
传参需要开始时间、结束时间、学校id、学校名称。
生成的表格名称后面自带时间戳