前端根据后端返回的excel二进制文件流进行导出下载

需求

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

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

1、封装axios请求拦截器
关键代码

1. import axios from 'axios'
2. import Vue from 'vue'
3. import store from '@/store/index'
4. import { Notification } from 'element-ui'
5. import logger from '@/plugins/logger'
6. // 基础路由
7. axios.defaults.baseURL = 'http://xxx:端口号' // 此处为后端接口服务器IP或域名地址
9. // 设置请求超时为5分钟
10. axios.defaults.timeout = 300000
12. // 不需要token验证的白名单
13. const noAuthWhiteList = [
14.   '/api/oa/auth',
15. ]
17. // 判断是否在白名单中
18. const isInWhiteList = (url) => {
19.   return noAuthWhiteList.some(whiteUrl => url.includes(whiteUrl))
20. }
22. axios.interceptors.request.use(
23.   (config) => {
24.     // 如果请求配置中明确指定了noAuth，或者url在白名单中，则不添加token
25.     if (!config.noAuth && !isInWhiteList(config.url)) {
26.       const token = store.state.main.token
27.       token && (config.headers.Authorization = token)
28.     }
29.    
30.     const catalogId = store.state.main.catalogId
31.     catalogId && (config.headers.catalogId = catalogId)
32.     return config
33.   },
34.   (error) => {
35.     Notification.error({ title: '网络请求错误', message: error })
36.     logger.error(error)
37.     return Promise.reject(error)
38.   }
39. )
41. axios.interceptors.response.use(
42.   function (response) {
43.     // 如果是文件流，直接返回
44.     if (response.config.responseType === 'blob') {
45.       return response;
46.     }
47.    
48.     if (response.data.code !== 200) {
49.       Notification.error({
50.         title: '请求失败',
51.         message: response.data.message || '数据填写错误，请查看错误日志详情',
52.       })
54.       return Promise.reject(response)
55.     }
56.     return Promise.resolve(response)
57.   },
58.   function (error) {
59.     if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
60.       Notification.error({
61.         title: '请求超时',
62.         message: '请求已超时，请稍后重试。',
63.       })
64.     } else if (error.response && error.response.status === 401) {
65.       // 1.接口401的时候，需要调用refresh token接口
66.       if (localStorage.getItem('firstRefresh')) {
67.         // localStorage.clear()
68.         localStorage.setItem('TOKEN', '')
69.         location.reload()
70.       } else {
71.         localStorage.setItem('firstRefresh', true)
72.         store
73.           .dispatch(GET_REFRESH_TOKEN, {
74.             refreshToken: store.state.main.refreshToken,
75.           })
76.           .then((resp) => {
77.             localStorage.setItem('TOKEN')
78.             location.reload()
79.           })
80.           .catch((error) => {
81.             localStorage.setItem('TOKEN')
82.             location.reload()
83.           })
84.       }
85.     } else {
86.       // 处理文件流错误响应
87.       if (error.response && error.response.config.responseType === 'blob') {
88.         // 转换blob错误信息
89.         const reader = new FileReader();
90.         reader.onload = () => {
91.           try {
92.             const errorData = JSON.parse(reader.result);
93.             Notification.error({
94.               title: '导出失败',
95.               message: errorData.message || '文件导出失败',
96.             });
97.           } catch (e) {
98.             Notification.error({
99.               title: '导出失败',
100.               message: '文件导出失败',
101.             });
102.           }
103.         };
104.         reader.readAsText(error.response.data);
105.       } else {
106.         Notification.error({
107.           title: '请求失败',
108.           message: error.message,
109.         });
110.       }
111.     }
112.     logger.error(error)
113.     return Promise.reject(error)
114.   }
115. )
117. function plugin(Vue, axios) {
118.   if (plugin.installed) {
119.     return
120.   }
121.   plugin.installed = true
123.   Object.defineProperties(Vue.prototype, {
124.     $axios: {
125.       get() {
126.         return axios
127.       },
128.     },
129.   })
130. }
132. Vue.use(plugin, axios)
133. export default Vue.prototype.$axios

复制代码

2、引入axios依靠

1. import axios from '@/plugins/axios'

复制代码

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

1. // 导出
2. export async function exportFile(params) {
3.     const res = await axios.post('/api/file/export', params, {
4.         responseType: 'blob',
5.         headers: {
6.             'Content-Type': 'application/json'
7.         }
8.     });
9.    
10.     // 从响应头中获取文件名
11.     const fileName = res.headers['content-disposition']
12.         ? decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
13.         : `导出模板_${new Date().getTime()}.xlsx`;
14.    
15.     // 创建Blob对象
16.     const blob = new Blob([res.data], {
17.         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
18.     });
19.    
20.     // 创建下载链接
21.     const link = document.createElement('a');
22.     link.href = window.URL.createObjectURL(blob);
23.     link.download = fileName;
24.     link.click();
25.     window.URL.revokeObjectURL(link.href);
26. }         

复制代码

写在最后

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。