vue 导出excel接口哀求和axios返回值blob类型处置惩罚

1. 导出功能vue文件代码

1. // 导出
2. const exportData = () => {
3.         const param = {
4.                 warehouseId: warehouseId.value,
5.                 dispatchType: dispatchType.value,
6.                 beginTime: rangeTime.value?.length ? rangeTime.value[0] : undefined,
7.                 endTime: rangeTime.value?.length ? rangeTime.value[1] : undefined
8.         }
9.         otherAPI.exportActionStatistics(param, 'blob').then((res: any) => {
10.                 let fileName = '任务统计'
11.                 let url = window.URL.createObjectURL(new Blob([res.data]))
12.                 let link = document.createElement('a')
13.                 link.style.display = 'none'
14.                 link.href = url
15.                 link.id = 'Adownload'
16.                 link.setAttribute('download', `${fileName}.xlsx`) //命名可能会出现问题，格式一定和后端下载的格式一样
17.                 document.body.appendChild(link)
18.                 link.click()
19.         })
20. }

复制代码

2. 接口方法代码

1.         // 任务导出
2.         exportActionStatistics(params: any, responseType: any) {
3.                 const obj = {}
4.                 if (params) {
5.                         AiObject.cloneTo(params, obj)
6.                 }
7.                 return REST.request(HTTPMethod.GET, this.server + 'Statistics/ExportActionStatistics' + AiObject.toQueryString(obj), undefined, undefined, responseType)
8.         }

复制代码

3. axios封装代码（REST.ts） 包罗导出接口报错时返回blob的数据处置惩罚

1. const service = axios.create({
2.         headers: {
3.                 // 'Access-Control-Allow-Origin': '*',
4.                 // 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
5.                 // 'content-Type': 'application/json; charset=utf-8'
6.         }
7. })
9. // 请求拦截
10. service.interceptors.request.use(
11.         (config: AxiosRequestConfig | any) => {
12.                 // 增加一种情况授权,授权之后再登录
13.                 if (window.sessionStorage.getItem('unlicensed') === '1') {
14.                         // 系统未授权的判断要跑到未登录判断的前面。
15.                 } else {
16.                         const token = sessionStorage.getItem('token')
17.                         if (token && config.headers) {
18.                                 config.headers.Authorization = token
19.                         } else {
20.                                 Auth.singleton.logout()
21.                         }
22.                 }
23.                 return config
24.         },
25.         (error: any) => {
26.                 Promise.reject(error)
27.         }
28. )
30. // 响应拦截
31. service.interceptors.response.use(
32.         (response) => Promise.resolve(response),
33.         (error: any) => {
34.                 // 授权失败
35.                 if (error?.response?.status === HTTPStatus.Unlicensed) {
36.                         window.sessionStorage.setItem('unlicensed', '1')
37.                         Global.router.push({ path: '/lockdown' })
38.                 } else if (error?.response?.status === HTTPStatus.Unauthorized) {
39.                         Auth.singleton.logout()
40.                 } else if (error && error.response) {
41.                         if (error.response.data instanceof Blob) {
42.                                 // 针对 Blob 类型错误处理
43.                                 const res = error.response
44.                                 const fileReader: any = new FileReader()
45.                                 fileReader.readAsText(new Blob([res.data], { type: 'application/octet-stream' }), 'utf-8')
46.                                 fileReader.onload = () => {
47.                                         const { message } = JSON.parse(fileReader.result)
48.                                         ElMessage({
49.                                                 showClose: true,
50.                                                 message: message,
51.                                                 type: 'error'
52.                                         })
53.                                 }
54.                         } else {
55.                                 ElMessage({
56.                                         showClose: true,
57.                                         message: error.response.data.message,
58.                                         type: 'error'
59.                                         // duration: 0
60.                                 })
61.                         }
62.                 } else {
63.                         ElMessage.error('连接到服务器失败，请联系管理员')
64.                 }
65.                 return Promise.reject(error)
66.         }
67. )

复制代码

ResponseType传入判定 

1.         static request(method: HTTPMethod, url: string, params?: string | number | { [key: string]: any }, className?: string, responseType?: ResponseType): AxiosPromise {
2.                 // 如果有className 就得额外增加进去。
3.                 if (typeof className === 'string') url += className
5.                 // 确保参数符合 AxiosRequestConfig 接口。
6.                 const config: AxiosRequestConfig = {
7.                         method
8.                 }
9.                 if (responseType) {
10.                         config.responseType = responseType as any
11.                 }
13.                 switch (typeof params) {
14.                         case 'number':
15.                         case 'string':
16.                                 config.url = `${url}${params}`
17.                                 break
18.                         case 'object':
19.                                 config.url = url
20.                                 config.data = params
21.                                 break
22.                         default:
23.                                 config.url = url
24.                                 break
25.                 }
27.                 if (responseType) {
28.                         config.responseType = responseType
29.                 }
31.                 return service(config)
32.         }

复制代码

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