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

背景

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