背景
项目中时常需要从后端下载文件到本地，如下载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); }
