旅游网站开发现状推广之家app

需求

在vue2中，后端接口返回一个文件流，前端实现excel文件流导出下载功能。

解决方案

利用axios请求后端接口，把后端返回的blob文件流转为一个临时在线url，然后利用a标签实现导出下载功能。

具体实现步骤

1、封装axios请求拦截器

关键代码

import axios from 'axios'
import Vue from 'vue'
import store from '@/store/index'
import { Notification } from 'element-ui'
import logger from '@/plugins/logger'
// 基础路由
axios.defaults.baseURL = 'http://xxx:端口号' // 此处为后端接口服务器IP或域名地址// 设置请求超时为5分钟
axios.defaults.timeout = 300000// 不需要token验证的白名单
const noAuthWhiteList = ['/api/oa/auth',
]// 判断是否在白名单中
const isInWhiteList = (url) => {return noAuthWhiteList.some(whiteUrl => url.includes(whiteUrl))
}axios.interceptors.request.use((config) => {// 如果请求配置中明确指定了noAuth，或者url在白名单中，则不添加tokenif (!config.noAuth && !isInWhiteList(config.url)) {const token = store.state.main.tokentoken && (config.headers.Authorization = token)}const catalogId = store.state.main.catalogIdcatalogId && (config.headers.catalogId = catalogId)return config},(error) => {Notification.error({ title: '网络请求错误', message: error })logger.error(error)return Promise.reject(error)}
)axios.interceptors.response.use(function (response) {// 如果是文件流，直接返回if (response.config.responseType === 'blob') {return response;}if (response.data.code !== 200) {Notification.error({title: '请求失败',message: response.data.message || '数据填写错误，请查看错误日志详情',})return Promise.reject(response)}return Promise.resolve(response)},function (error) {if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {Notification.error({title: '请求超时',message: '请求已超时，请稍后重试。',})} else if (error.response && error.response.status === 401) {// 1.接口401的时候，需要调用refresh token接口if (localStorage.getItem('firstRefresh')) {// localStorage.clear()localStorage.setItem('TOKEN', '')location.reload()} else {localStorage.setItem('firstRefresh', true)store.dispatch(GET_REFRESH_TOKEN, {refreshToken: store.state.main.refreshToken,}).then((resp) => {localStorage.setItem('TOKEN')location.reload()}).catch((error) => {localStorage.setItem('TOKEN')location.reload()})}} else {// 处理文件流错误响应if (error.response && error.response.config.responseType === 'blob') {// 转换blob错误信息const reader = new FileReader();reader.onload = () => {try {const errorData = JSON.parse(reader.result);Notification.error({title: '导出失败',message: errorData.message || '文件导出失败',});} catch (e) {Notification.error({title: '导出失败',message: '文件导出失败',});}};reader.readAsText(error.response.data);} else {Notification.error({title: '请求失败',message: error.message,});}}logger.error(error)return Promise.reject(error)}
)function plugin(Vue, axios) {if (plugin.installed) {return}plugin.installed = trueObject.defineProperties(Vue.prototype, {$axios: {get() {return axios},},})
}Vue.use(plugin, axios)
export default Vue.prototype.$axios

2、引入axios依赖

import axios from '@/plugins/axios'

3、在api.js文件中请求接口，创建a标签实现下载导出

// 导出
export async function exportFile(params) {const res = await axios.post('/api/file/export', params, {responseType: 'blob',headers: {'Content-Type': 'application/json'}});// 从响应头中获取文件名const fileName = res.headers['content-disposition']? decodeURIComponent(res.headers['content-disposition'].split('filename=')[1]): `导出模板_${new Date().getTime()}.xlsx`;// 创建Blob对象const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});// 创建下载链接const link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = fileName;link.click();window.URL.revokeObjectURL(link.href);
}          

写在最后

使用时把接口/api/file/export换为自己的接口地址即可，记住一定要加返回类型responseType: ‘blob’，否则可能造成文件无法正常打开。