VUE脚手架项目中导出EXCEl文件
程序员文章站
2024-03-20 18:03:04
...
API
excel.js
import axios from 'axios';
import {getToken} from '@/utils/token';
/**
* 导出搬抬单excel
* @param e 参数
*/
export function excelToMoveList(e) {
return axios({
url: window.localStorage.url + `/excel/excelToMoveList?begintime=${e.begintime}&endtime=${e.endtime}&isMove=${e.isMove}&areaCode=${e.areaCode}`,
type: 'get',
headers: {
"Authorization": getToken() // 传递Token
},
responseType: 'blob'
})
}
Methods
excel.vue
excelToMoveList() {
// 参数
let params = {
beginTime: this.moveOrder.time,
endTime: this.moveOrder.time,
isMove: this.moveOrder.isMove,
areaCode: this.$store.state.user.areacode
}
excel.excelToMoveList(params).then(res => {
if (!res.data) {
return
}
// 获取后台返回的文件名
const fileName = res.headers['content-disposition'].split('=')[1];
const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
const url = window.URL.createObjectURL(blob);
const aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", decodeURI(fileName));
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}).catch(() => {
this.$message({message: '文件导出异常', type: 'error', duration: 1000});
})
}
}
注:脚手架中使用request拦截器后无法直接获得header参数,因此api中需要通过axios直接调用
上一篇: EXCEL导出简洁版
下一篇: Session
推荐阅读
-
vue实现excel文件导出,Java后端文件流输出
-
VUE脚手架项目中导出EXCEl文件
-
vue中使用axios下载java后台返回文件流导出excel文档
-
vue后端返回文件流,前端实现Excel文件导出自定义文件名(新)
-
php 中mysql导出excel文件方法
-
mysql中数据导出成excel文件语句
-
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 & 在public中添加HBuilderX的打包配置文件manifest.json
-
在WEB页面上将EXCEL文件导入、导出到数据库中_PHP
-
详解如何在Vue项目中导出Excel
-
UG8.0中的点坐标怎么导出到excel文件?