vue中文件下载功能实现
1、需求:页面中点击下载excel文件2、实现代码a(后端未开启token验证可用)// mian.js文件中import axios from 'axios'Vue.prototype.$http = axiosaxios.interceptors.request.use(function (config) {config.headers.Authorization = loca...
·
1、需求:页面中点击下载excel文件
2、实现代码a(后端未开启token验证可用)
// mian.js文件中
import axios from 'axios'
Vue.prototype.$http = axios
axios.interceptors.request.use(function (config) {
config.headers.Authorization = localStorage.getItem('token')
return config
})
// 下载页面
download () {
this.$http.get('xxx url请求地址')
.then(res => {
window.location.href = res.config.url
})
}
存在问题:当后端开启token验证后,界面会提示
window.location.href 就是一个链接跳转,它无法传token
{
resultcode: "-3",
resultmessage: "token验证不通过,XXX"
}
3、实现代码b(兼容IE10、11)
// 下载页面(this.$message为element-UI提示信息)
download () {
this.pathUrl = 'xxx url请求地址'
this.$http({
method: 'get',
url: this.pathUrl,
responseType: 'blob'
}).then((res) => {
if (res) {
if ('msSaveOrOpenBlob' in navigator) {
// Microsoft Edge and Microsoft Internet Explorer 10-11
window.navigator.msSaveOrOpenBlob(res.data, '文件名称' + new Date().getTime() + '.xls')
this.$message({
message: '导出成功',
type: 'success'
})
} else {
// standard code for Google Chrome, Mozilla Firefox etc
let url = window.URL.createObjectURL(res.data)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '文件名称' + new Date().getTime() + '.xls')
document.body.appendChild(link)
link.click()
this.$message({
message: '导出成功',
type: 'success'
})
}
} else {
this.$message({
message: '导出失败',
type: 'error'
})
}
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)