前端接受后端文件流并下载到本地的方法

前端接受后端文件流并下载到本地的方法

• 背景
• 法一：针对get方法的文件流下载
• 法二：针对get和post通用的文件流下载
• 配置axios
• 请求方法
• 组件调用

背景

项目中时常需要从后端下载文件到本地，如下载excel模板，或者合同文件之类的，前端应该如何处理后端返回的文件流并下载到本地呢？

法一：针对get方法的文件流下载

此方法是最为简单的，直接将页面路径重新定向到后端请求文件流的接口地址即可

window.location.href = '后端的文件流下载接口地址';

法二：针对get和post通用的文件流下载

配置axios

import axios from 'axios';

const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 30000,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});

// 请求拦截
service.interceptors.request.use(
(config) => {
config.headers['X-User-Token'] = localStorage.getItem('token');
return config;
},
(error: any) => {
Promise.reject(error);
},
);

// 响应拦截
service.interceptors.response.use(
(response: any) => {
const res = response.data;
if (response.config && response.config.responseType === 'blob') { // 判断是不是下载请求
const excelUrl = window.URL.createObjectURL(new Blob([res]));
const link = window.document.createElement('a');
const fileName = JSON.parse(response.config.data).fileName; // 文件名
const suffix = JSON.parse(response.config.data).suffix; // 文件后缀
const isDownload = JSON.parse(response.config.data).isDownload; // 是否是下载（如果不是下载则为导出）
link.href = excelUrl;
link.download = `${fileName}.${suffix ? suffix : 'xlsx'}`;
document.body.appendChild(link); // 兼容FireFox
link.click();
window.URL.revokeObjectURL(excelUrl);
link.remove(); // 兼容FireFox
console.log(isDownload ? '下载成功！' : '导出成功！')
}
return Promise.resolve(res); // 下载文件可能没code情况
},
(error: any) => {
return Promise.reject(error);
},
);

export default service;

请求方法

// 下载合同
import $axios from '@/utils/axiosUtil';
export const downloadProtocol = (data: any) => {
return $axios({
url: `后端的下载地址`,
method: 'get',
responseType: 'blob',
data,
});
};

组件调用

// 下载合同
private async uploadProtocol() {
const params = {
applyId: this.applyId,
fileName: '合同协议',
suffix: 'zip',
isDownload: true,
};
const res: any = await downloadProtocol(params);
}