FileSaver.js 封装的blob文件数据流下载方法

安装file-saver插件： 

npm i file-saver

项目使用elementPlus，进行文件下载的动画效果。

import { ElLoading } from 'element-plus' // 引入加载动画效果
import axios from 'axios';
import { saveAs } from 'file-saver';
let downloadLoadingInstance;

// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: import.meta.env.VITE_APP_BASE_API,
    // 超时
    timeout: 10000,
});

// 严重是否为Blob数据
const isBlobData = async (data)=> {
  try {
    const text = await data.text();
    JSON.parse(text);
    return false;
  } catch (error) {
    return true;
  }
}
export function download(url, params, filename) {
    downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
    return service
        .post(url, params, {
            
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            responseType: 'blob',
        })
        .then(async (data) => {
            const isLogin = await isBlobData(data);
            if (isLogin) { // 如果是Blob数据  
                const blob = new Blob([data],{ type: "application/vnd.ms-excel" }); // 第二个参数为下载的文件的类型
                saveAs(blob, filename);// 调用方法下载
            } else {
                const resText = await data.text();
                const rspObj = JSON.parse(resText);
                const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode.default;
                ElMessage.error(errMsg);
            }
            downloadLoadingInstance.close();
        })
        .catch((r) => {
            console.error(r);
            ElMessage.error('下载文件出现错误，请联系管理员！');
            downloadLoadingInstance.close();
        });
}