vue文件流导出封装 兼容ie

问了不影响原先的axios封装 及拦截 重新定义了一套新的专用于文件流的导出方法 并兼容ie10以上

excelFileDown.js

/*
 * @Author: your name
 * @Date: 2021-11-24 15:58:37
 * @LastEditTime: 2022-02-08 18:50:57
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \transaction_share\src\request\excelFileDown.js
 */
 //axios封装 脱离原axios方法
import axios from 'axios'
import qs from 'qs'



export function excelFile(url, params, excelName, useForm = true) {
    var instance = axios.create({
            method: "post",
            baseURL: process.env.VUE_APP_BASE_URL,
            timeout: 50000,
            responseType: 'blob',
        })
        // 设置请求拦截
    instance.interceptors.request.use(config => {
                // config.headers.Authorization = 'Bearer' + 'asd13as1d321as32d'
                // config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
                // 每次发送请求前判断是否存在token，如果存在，则同意再http请求的header都加上token
                // 即使在本地存在token，也有可能token已失效，所以在响应拦截器
                // const token = store.state.token
                const token = sessionStorage.getItem('token')
                token && (config.headers.Authorization = token)
                return config
            },
            error => {
                return Promise.reject(error)
            })
        // 响应拦截器
    instance.interceptors.response.use(
        response => {
            console.log('response1',response)
            if (response.headers['content-type'] == "application/vnd.ms-excel;charset=utf8"||response.headers['content-type'] == "application/vnd.ms-excel;charset=utf-8") {
                return Promise.resolve(response)
            }else if (response.data.code == '100008'||response.data.code == '030001'||response.data.code == '030002') {
                Message({
                    type: "warning",
                    message: response.data.msg
                });
                setTimeout(() => {
                    sessionStorage.clear();
                    removeCookie('userInfo')
                    window.location.href = `${window.location.origin}/login`
                    // sessionStorage.clear();
                    // router.replace({
                    // path: `${window.location.origin}/login` // 到登录页重新获取token
                    // }).catch(err => {

                    // });
                }, 1000);
            } else {
                Message({
                    type: "warning",
                    message: response.data.msg
                });
            }
        },
        error => {
            console.log('error', error)
        }
    )
    return new Promise((resolve, reject) => {
        instance.post(url, useForm ? qs.stringify(params) : params, { headers: { 'Content-Type': useForm ? 'application/x-www-form-urlencoded' : 'application/json;charset=UTF-8' } }).then(res => {
            // resolve(res.data)
            if (res) {
                if (window.navigator.msSaveBlob) {
                    // for ie 10 and later
                    console.log(res)
                    try {
                        var blobObject = new Blob([res.data]);
                        window.navigator.msSaveBlob(blobObject, `${excelName}.xlsx`);
                    } catch (e) {
                        console.log(e);
                    }
                } else {
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel;charset=utf-8"
                    }); // res就是接口返回的文件流了
                    let objectUrl = URL.createObjectURL(blob);
                    // console.log(objectUrl);
                    // const fileName = FileName;
                    const elink = document.createElement("a");
                    elink.download = `${excelName}.xlsx`; //下载文件名称,
                    elink.style.display = "none";
                    elink.href = objectUrl;
                    document.body.appendChild(elink);
                    elink.click();
                    URL.revokeObjectURL(elink.href); // 释放URL 对象
                    document.body.removeChild(elink);
                }
            }
        }).catch(err => {
            reject(err.data)
        })
    })
}

api调用

import { excelFile } from './excelFileDown'
//params 入参   excelName 导出文件名
export const performanceExportExcelById = (params, excelName) => excelFile(`${portalServer}/performance/exportExcelById`, params, excelName)

vue页面调用

import {
  performanceExportExcelById,
} from "@/request/api";
performanceExportExcelById({ id:this.id}, '导出文件名');