记笔记,免忘记!
记录写这个时候碰到的坑,仅为方便后面自己查询!
1、首先需求是,选择时间段后下载xls文件,通过后台接口请求后结果如下图
2、但是得到这样的之后,请求怎么样都走catch不走then,于是我觉得是因为共用https.js里面的axios拦截导致了直接走catch
3、然后我就重写了个js,重引入axios,并重写了一个axios请求,但是怎么点下载都是
一直百度,然后对照自己写的代码,真的没啥毛病呀,我真是要裂开。两小时就是没整出来。代码如下:
import axios2 from 'axios';
import Vue from 'vue'
import {
baseUrl
} from '../../../public/url'
//
function exportFilePost(data) {
return axios2({
method: data.method,
url: baseUrl + data.url,
data: data.params,
responseType: 'blob',
headers: {
token: localStorage.getItem('auvtoken') || ''
},
})
.then((res) => {
console.log(this)
downloadFile(res, data)
}).catch(error => {
Vue.prototype.$message.error(error || '请求异常')
console.log(error)
})
}
然后通过断点,打印呀,最后发现这个还是走了原来了axios所有配置。
最后正确代码如下:
import axios from 'axios';
import Vue from 'vue'
import {
baseUrl
} from '../../../public/url'
//重点来了:
let axios2 = axios.create() //axios要重定义实例,否则还会延用原来那个全局实例参数
function exportFilePost(data) {
return axios2({
method: data.method,
url: baseUrl + `${data.url}`,
data: data.params,
responseType: 'blob',
headers: {
// 'Content-Type': 'application/json',
// 'Content-Type': data.contentType || 'application/vnd.ms-excel',
token: localStorage.getItem('auvtoken') || ''
},
})
.then((res) => {
console.log(this)
downloadFile(res, data)
}).catch(error => {
Vue.prototype.$message.error(error || '请求异常')
console.log(error)
})
}
//以下网上抄的
function downloadFile(res, data) {
console.log(res, data)
const link = document.createElement('a')
let blob = new Blob([res.data], {
type: 'application/vnd.ms-excel' //application/octet-stream
})
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
// link.download = res.headers['content-disposition'] //下载后文件名
link.download = data.fileName //下载的文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
//vue页面引用
// 导出
handleDownloadLog() {
let Obj = {
method: 'POST',
url: '',
fileName: '日志',
params:{
beginTime:this.timestamp(this.Svalue),
endTime:this.timestamp(this.Evalue)
}
}
exportFilePost(Obj)
},
希望对正在写这个的你有帮助