vue封装一个下载文件的API

一个下载文件的API

VUE

POST

方便/快捷/好用

代码:

import request from "XXXXXX";

// url: 接口地址(POST请求),  params: 传参, name:默认文件名
export default postDownloadFile = async (url, params, name = '') => {
    const close = Message({
        message: (name && name + '下载中') || '文件下载中',
        iconCllass: 'el-icon-loading',
        duration: 0,
    }).close

    try {
        const rsp = (await request.post(
            url,
            { ...params },
            { responseType: 'blob' }
        )) ?? {}
        close()
        if (rsp?.status === 200) {
            const { headers } = rsp
            // 截取文件名
            const fileName = headers['content-disposition']
                .split(';')[1]
                .split('filename')[1]

            // 下载
            const reader = new FileReader()
            reader.readAsDataURL(rsp.data)
            reader.onload = e => {
                const a = document.createElement('a')
                a.download = name || decodeURIComponent(escape(fileName)) // 中文乱码解码
                a.href = e.target.result
                document.body.appendChild(a)
            }

            Message({
                message: (name && name + '下载成功') || '下载成功',
                type: 'success',
            })
            return Promise.resolve(true)
        } else {
            Message({
                message: (name && name + '下载失败') || '下载失败',
                type: 'error',
            })
            return Promise.resolve(false)
        }
    } catch (error) {
        close()
        Message({
            message: (name && name + '下载失败') || '下载失败',
            type: 'error',
        })
    }
}

使用:

postDownloadFile('XXXXXXXXXXXXX', {}, '文件名')