前端使用fetch方式实现文件下载，可区分后端返回的是否是文件,再做出相应的交互

最新推荐文章于 2025-03-31 16:31:55 发布

天马行空zqzq

最新推荐文章于 2025-03-31 16:31:55 发布

阅读量775

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_42039912/article/details/129530163

版权

①下载函数封装：

const commonExportFile = ({ url, method, data = {}, cb = () => {} }) => {
    const hide = message.loading('下载中..', 0)
    fetch(url, {
        method,
        body: JSON.stringify(data),
        credentials: 'include',
        headers: new Headers({
            'Content-Type': 'application/json',
        }),
    }).then(response => {
        // 判断返回的是否为文件
        if (response.headers.get('Content-Disposition')) {
            response.blob().then(blob => {
                const blobUrl = window.URL.createObjectURL(blob)
                const filename = decodeURIComponent(response.headers.get('Content-Disposition').split(';')[1].split('=')[1])
                const aElement = document.createElement('a')
                aElement.style.display = 'none'
                aElement.href = blobUrl
                aElement.download = filename
                document.body.appendChild(aElement)
                aElement.click()
                window.URL.revokeObjectURL(blobUrl)
                document.body.removeChild(aElement)
            })
        } else {
            // 下载失败则将后端返回的内容转为纯文本
            response.json().then(json => {
            // 错误信息
                const { rs, rsdesp } = json || {}
                if (!rs) {
                    message.error(rsdesp || '导出失败')
                }
            })
        }
        cb()
    }).catch(e => {
        message.error(e || '文件下载失败')
        cb()
    })
}

②函数调用;

commonExportFile({
    url: 'a/b/c/down',
    method: 'POST',
    data: {},
})