前端axios下载导出文件工具封装

使用示例:

javascript 复制代码
import { fileDownload } from '@/utils/fileDownload'

fileDownload({ url: process.env.VUE_APP_BASE_URL + `/statistic/pageList/export`, method: 'post', data: data })

工具类:

javascript 复制代码
import store from '../store/index'
import {
    getAccessToken
} from '@/utils'
import axios from 'axios'
const token = store.getters.token || getAccessToken()
// 单个文件下载
export const fileDownload = (obj) => {
    let axiosParams = {
        method: obj.method,
        url: process.env.VUE_APP_apipath + obj.url,
        responseType: 'blob',
        headers: {
            'Authorization': `Bearer ${token}`
        }
    }
    if (obj.method && 'POST' === obj.method.toUpperCase()) {
        axiosParams.data = obj.data ? obj.data : {}
    }
    if (obj.method && 'GET' === obj.method.toUpperCase()) {
        axiosParams.params = obj.params ? obj.params : {}
    }
    return axios(axiosParams).then(res => {
        if (res && res.data) {
            const url = window.URL.createObjectURL(
                new Blob([res.data], {
                    type: 'application/octet-stream'
                })
            )
            if (obj.noLink) {
                return url
            }
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            if (res.headers['content-disposition']) {
                console.log(decodeURI(
                    res.headers['content-disposition'].slice(
                        res.headers['content-disposition'].indexOf('=') + 1,
                        res.headers['content-disposition'].indexOf('.')
                    )
                ))
                link.download =
                    decodeURI(
                        res.headers['content-disposition'].slice(
                            res.headers['content-disposition'].indexOf('=') + 1,
                            res.headers['content-disposition'].indexOf('.')
                        )
                    ) +
                    res.headers['content-disposition'].slice(
                        res.headers['content-disposition'].indexOf('.')
                    )
            } else {
                if (obj.fileName) {
                    link.download = obj.fileName
                }
            }

            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(url)
        }
    })
}

后端返回设置:


相关推荐
笑我归无处3 分钟前
强引用、软引用、弱引用、虚引用详解
java·开发语言·jvm
02苏_3 分钟前
秋招Java面
java·开发语言
ytttr87311 分钟前
64QAM信号的数字预失真处理(MATLAB实现)
开发语言·matlab
Nebula_g16 分钟前
C语言应用实例:硕鼠游戏,田忌赛马,搬桌子,活动选择(贪心算法)
c语言·开发语言·学习·算法·游戏·贪心算法·初学者
爱吃甜品的糯米团子23 分钟前
详解 JavaScript 内置对象与包装类型:方法、案例与实战
java·开发语言·javascript
知花实央l25 分钟前
【Web应用实战】 文件上传漏洞实战:Low/Medium/High三级绕过(一句话木马拿webshell全流程)
前端·学习·网络安全·安全架构
华仔啊25 分钟前
JavaScript + Web Audio API 打造炫酷音乐可视化效果,让你的网页跟随音乐跳起来
前端·javascript
鸡吃丸子28 分钟前
SEO入门
前端
郝学胜-神的一滴1 小时前
Linux下,获取子进程退出值和异常终止信号
linux·服务器·开发语言·c++·程序人生
檀越剑指大厂1 小时前
【Nginx系列】Tengine:基于 Nginx 的高性能 Web 服务器与反向代理服务器
服务器·前端·nginx