还不了解axios的同学可以前往这里，axios的使用说明
下面看一下下载文件流注意事项：
1、首先确保后端的是输出流格式
2、axios的服务器响应的数据类型为responseType:blob
3、返回的数据流占用response.data字段
示例：
axios({
method:'post',//请求方式
url:'请求地址',
data:{id:1},//请求参数
responseType:'blob'//服务器返回的数据类型
}).then(response=>{
const content = response.data //返回的内容
const fileName = '文件.xls'//下载文件名
download(content,fileName)
})
//处理下载流
function download(content,fileName){
const blob = new Blob([content]) //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
dom.style.display = 'none'
dom.href = url
dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
document.body.appendChild(dom)
dom.click()
}
工程化下对axios的配置如下
requestDownload.js
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
// create an axios instance
const service = axios.create({
baseURL: '请求地址', // process.env.VUE_APP_BASE_API; url = base url + request url;
withCredentials: true,//表示跨域请求时是否需要使用凭证
responseType: 'blob' //接收返回的类型
})
/**
* HTTP方法
*/
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token --['X-Token'] as a custom key.
// please modify it according to the actual situation.
config.headers['token'] = store.getters.token
}
return config
},
error => {
// do something with request error
Message({
message: '文件不存在',
type: 'error',
duration: 5 * 1000
}) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code.
*/
response => {
if (!response.data) {
return Promise.reject('文件不存在')
} else {
return response.data
}
},
error => {
// console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
requestDownload.js这种设置存在一个问题：所有的返回都是以blob方式返回的，若出现token超时的情况，将无法校验；
改进方法如下：
1、request.js
....request配置....
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
if (response.config.responseType === 'blob') {
return res
}
//假设res.code=0时，返回结果为succuss ， res.code = 9008为token超时
if (res.code === 9008 ) {
Message({
message: '登录超时，请重新登录',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error.message)
} else {
return res
}
},
error => {
// console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
2、后端增加校验token超时的方法
3、请求接口文件：requestDownload.js 封装请求方法
import request from '@/utils/request'
async function requestDownload({ url, method, data }) {
await request({
url: '校验超时链接',
method: 'post'
})
return request({
url,
method,
data,
responseType: 'blob'//必填项
})
}
export default requestDownload
公共方法文件/util/index.js中增加，处理流的方法
//处理下载流
export function download(content,fileName){
const blob = new Blob([content]) //创建一个类文件对象：Blob对象表示一个不可变的、原始数据的类文件对象
const url = window.URL.createObjectURL(blob)//URL.createObjectURL(object)表示生成一个File对象或Blob对象
let dom = document.createElement('a')//设置一个隐藏的a标签，href为输出流，设置download
dom.style.display = 'none'
dom.href = url
dom.setAttribute('download',fileName)//指示浏览器下载url,而不是导航到它；因此将提示用户将其保存为本地文件
document.body.appendChild(dom)
dom.click()
}
接口示例 proAdd.js中增加下载接口
import requestDownload from '@/utils/requestDownload'
export function exportFile(data) {
return requestDownload({
url: '/excel/excelDownLoad',
method: 'post',
data:data
})
}
使用示例 exportExcelBtn.vue中添加调用方法
import { exportFile } from '@/api/**.js'
import { download } from '@/utils/index.js'
exportFile({ id : 1 }).then(result => {
download(result, '模板文件.xlsx')
})
报错处理改进：
返回的blob对象，存在两个属性，一个是size,一个是type，可以利用type为'application/json'时，将blob读取出来并转换为json对象
//读取blob转换为json对象
var reader = new FileReader()
reader.onload = e => {
let data = JSON.parse(e.target.result)
console.log(data)
}
reader.readAsText(res.data)
完整格式为
....request配置....
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
if (response.config.responseType === 'blob') {
//判断若是json则代表返回错误，转成json
if(res.data.type === 'application/json'){
var reader = new FileReader()
reader.onload = e => {
let data = JSON.parse(e.target.result)
console.log(data)
//报错信息提示
Message({
message: data.message,
type: 'error',
duration: 5 * 1000
})
}
reader.readAsText(res.data)
} else {
return res
}
}
//假设res.code=0时，返回结果为succuss ， res.code = 9008为token超时
if (res.code === 9008 ) {
Message({
message: '登录超时，请重新登录',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error.message)
} else {
return res
}
},
error => {
// console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
