vue 前端下载后端传过来的文件流

最新推荐文章于 2024-07-06 00:00:00 发布

wjHHH__

最新推荐文章于 2024-07-06 00:00:00 发布

阅读量387

点赞数 1

分类专栏： vue js 文章标签： html vue.js javascript

本文链接：https://blog.csdn.net/wjHHH__/article/details/120000528

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何在前端通过axios请求，设置responseType为'blob'来接收后端返回的文件流。然后利用浏览器API创建ObjectURL，结合隐藏的a标签实现文件下载。同时，针对IE浏览器的兼容性问题，使用了msSaveBlob方法。这个过程涉及前端与后端交互、文件下载和浏览器兼容性处理。

摘要由CSDN通过智能技术生成

前端下载后端传过来的文件流

首先axios请求中的responseType: ‘blob’

dataDownload(res) {
        const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) // 文件名
        const data = res.data // Blob数据对象
        const uA = window.navigator.userAgent
        const isIE =
          /msie\s|trident\/|edge\//i.test(uA) &&
          !!('uniqueID' in document || 'documentMode' in document || 'ActiveXObject' in window || 'MSInputMethodContext' in window)
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        // 兼容IE
        if (isIE) {
          navigator.msSaveBlob(new Blob([data]), fileName)
        } else {
          link.click()
        }
      },

wjHHH__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 前端下载后端传过来的文件流

前端下载后端传过来的文件流首先axios请求中的responseType: ‘blob’dataDownload(res) { const fileName = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) // 文件名 const data = res.data // Blob数据对象 const uA = window.navigator.userAg
复制链接

扫一扫