vue 实现Excel文件下载

downloadFile(data) {
   axios({
     method: "post",
     url: `http://${globeInterfaceIp}/api02/getExcel`,
     data: data,//将数据发送给后端，后端根据数据返回相应文件
     headers: {
       "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON
     },
     responseType: "blob", //服务器响应的数据类型为blob
   })
   .then((res) => {
     const blob = res.data;	//获取Blob对象
     const elink = document.createElement("a");// 创建一个超链接对象实例
     const fileName = this.store.getters.getDate + this.store.getters.getHour + ".xls";//Excel文件名
     elink.download = fileName;// 设置要下载的文件的名称
     elink.href = URL.createObjectURL(blob);//设置a标签的href属性为一个包含Blob对象的URL
     document.body.appendChild(elink);
     elink.click();// 触发超链接的点击事件
     URL.revokeObjectURL(elink.href); // 释放URL 对象
     document.body.removeChild(elink);// 移除超链接对象实例
   })
   .catch((error) => {
     console.log(error);
   });
 }

获取Blob对象

downloadFile(data) {
   axios({
     method: "post",
     url: `http://${globeInterfaceIp}/api02/getExcel`,
     data: data,//将数据发送给后端，后端根据数据返回相应文件
     headers: {
       "Content-Type": "application/json", //客户端告诉服务器请求体数据的格式是JSON
     },
     responseType: "blob", //服务器响应的数据类型为blob
   })
   .then((res) => {
     const blob = res.data;	//获取返回的Blob对象
     console.log(blob);
   })
   .catch((error) => {
     console.log(error);
   });
 }

vue +axios

import axios from 'axios';



const service = axios.create({
    baseURL: getBaseUrl(),
    timeout: 60000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    }
})

/**
 * <p>请求拦截器设置token
 */
service.interceptors.request.use(function (config) {
    config.headers['token'] = "token"
    if (config.method === 'post' || config.method === "POST") {
        //config.headers['Content-Type'] = 'text/plain;charset=UTF-8'
        config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    }
    return config
}, function (error) {
    console.log(error)
    return Promise.reject(error);
});


/**
 * <p>响应拦截器,处理全局信息
 */
service.interceptors.response.use(function (response) {
    const { status, statusText, data } = response;
    if (status === 200) {
        //此处判断是否下载请求
        if (response.headers['content-type'] === 'application/octet-stream') {
            //根据响应头获取文件名称
            let fileName = response.headers['content-disposition'].match(/filename=(.*)/)[1]
            if (fileName) {
                fileName = decodeURI(fileName)
            } else {
                //此处表示后台没有设置响应头 content-disposition,请根据业务场景自行处理
                fileName = "download.txt"
            }
            const blob = new Blob([response.data], { type: 'application/octet-stream' })
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(blob, fileName)
            } else {
                const blobURL = window.URL.createObjectURL(blob)
                const tempLink = document.createElement('a')
                tempLink.style.display = 'none'
                tempLink.href = blobURL
                tempLink.setAttribute('download', fileName)
                if (typeof tempLink.download === 'undefined') {
                    tempLink.setAttribute('target', '_blank')
                }
                document.body.appendChild(tempLink)
                tempLink.click()
                document.body.removeChild(tempLink)
                window.URL.revokeObjectURL(blobURL)
            }
        } else {
        	//非下载请求返回的数据为json
            return response.data
        }
    } else {
        console.error(status, statusText, data)
    }
    return response;
}, function (error) {
    console.error(error)
    return Promise.reject(error);
});


export default service;

请求接口api文件

import request from "../utils/request.js";

const API = {
    DEMO_URL: "/test",
    DOWNLOAD_URL: "/download"
}

/**
 * <p>返回json数据的方法
 * @param params
 * @returns {*}
 */
export function test(params) {
    return request({
        url: API.DEMO_URL,
        method: "GET",
        params
    })
}

/**
 * <p>下载文件的方法
 * @returns {*}
 */
export function download() {
    return request({
        url: API.DOWNLOAD_URL,
        method: "GET",
        responseType: 'blob' //此处设置为blob
    })
}