UzumakiItachi
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

UzumakiItachi

起风了,唯有努力生存。
首页
  • JavaSript
  • Vue

    • Vue2
    • Vue3
  • React

    • React_18
  • WebPack
  • 浏览器相关
  • 工程化相关
  • 工作中遇到的问题以及解决方案
  • Git
  • 面试
  • 学习
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 个人产出
  • 实用工具
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • WebPack

  • 浏览器相关

  • 工程化相关

  • 工作中遇到的问题以及解决方案

    • 解决浏览器返回页面不刷新的问题
    • 前端如何下载文件流
    • uniapp APP端实现更新最新安装包
    • GitHub Actions Process completed with exit code 128 的解决方案
    • 保留文字输入的空格和换行
    • 缩放适配大屏页
    • 一次性加载n多张图片的性能优化方案
    • NOT-Cool 低代码页面架构思路
    • h5下载vcard快捷保存联系人信息
    • 结合elementui实现的动态主题
    • 解决monorepo场景下子包作为依赖项在开发和生产暴露文件的问题
    • 给npm配置github令牌
    • 移动端电子印章解决方案
    • 小程序canvas绘制海报中遇到的一些坑
    • 超详细的虚拟列表实现过程
    • 小程序实现一个事件中心
    • 请求超时后如何优雅的重新请求
    • 超详细的大文件上传实现方案
    • 仿抖音短视频组件实现方案
    • swiper渲染大量数据的优化方案
    • 前端检测更新,自动刷新网页
  • Git

  • Vite

  • 一些小工具

  • 算法

  • 服务器

  • HTTP

  • 技术
  • 工作中遇到的问题以及解决方案
hanhanbuku
2023-03-03

前端如何下载文件流

大致就是后端返回文件流,前端通过blob对象读取并转成临时地址然后通过a标签下载

data就是后端返回的文件流
type指定MIME类型既媒体类型,指定了媒体类型后就会下载什么类型的文件下来,所以这里一定不要乱指定
 const blob = new Blob([data], {
        type:
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
      })
      const url = window.URL.createObjectURL(blob)
      const aLink = document.createElement('a')
      aLink.style.display = 'none'
      aLink.href = url
      aLink.setAttribute('download', '申请贷款资料.zip')
      document.body.appendChild(aLink)
      aLink.click()
      /** 下载完成移除元素 */
      document.body.removeChild(aLink)
      /** 释放掉blob对象 */
      window.URL.revokeObjectURL(url)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

附上常见MIME类型 在请求前还需要向axios传递responseType参数,表明需要后台返回什么格式

axios.get(this.downloadContractFilePath + contractNo, {
        // 设置返回数据类型,这里我设置的是"blob";
        responseType: 'blob'
    })
1
2
3
4
})

另外,setAttribute方法也会修改文件的类型,如果文件名后面写了文件后缀,那下载下来的就会变成后缀的文件类型

编辑 (opens new window)
上次更新: 2023/03/08, 09:35:38
解决浏览器返回页面不刷新的问题
uniapp APP端实现更新最新安装包

← 解决浏览器返回页面不刷新的问题 uniapp APP端实现更新最新安装包→

最近更新
01
小程序实现全局状态管理
07-09
02
前端检测更新,自动刷新网页
06-09
03
swiper渲染大量数据的优化方案
06-06
更多文章>
Theme by Vdoing | Copyright © 2023-2025 UzumakiItachi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式