【vue】使用导出功能，后端返回数据流格式的处理

原创已于 2023-05-04 10:35:26 修改 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #html

于 2023-05-04 10:28:21 首次发布

Vue 专栏收录该内容

17 篇文章

订阅专栏

文章讲述了如何在接收到数据流格式的接口数据时，通过Blob对象进行解析处理，特别是针对Excel文件。然后通过创建HTML链接触发浏览器自动下载。整个过程涉及axios库的使用，设置responseType为blob，以及封装下载文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、当从接口获取的数据流格式的数据时，进行解析处理，使用blob转换

const blob = new Blob([res.data], {type: 'application/vnd.ms-excel; charset=utf-8'})

解析前的格式：

解析后的数据：

二、创建链接实现浏览器自动下载

const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = fileName
link.click()
URL.revokeObjectURL(link.href)

三、请求接口的时候注意类型

{responseType: 'blob'}

三、封装方法

function downloadFile (url, fileName, condition) {
    const hide = message.loading('下载中..', 0)
    let info = JSON.parse(JSON.stringify(condition))
    axios.post(url, {...info}, {responseType: 'blob'}).then(res => {
        if (res.code === 200) {
            hide()
            this.$message.error(res.message)
            return
        }
        const blob = new Blob([res.data], {type: 'application/vnd.ms-excel; charset=utf-8'})
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.download = fileName
        link.click()
        URL.revokeObjectURL(link.href)
        hide()
        this.$message.success('导出成功')
    }).catch(err => {
        hide()
        this.$message.error('导出失败')
    })
}