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

①下载函数封装:

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: {},
})

你可能感兴趣的:(javascript,前端)