个人博客 个人博客
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

董先亮

前端react开发
首页
  • 前端
  • 后端
  • Git
  • Docker
  • 网络
  • 操作系统
工具
阅读
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • HTML

  • CSS

  • JavaScript

    • 防抖与节流
    • 本地存储
    • PWA
    • 地理位置
    • 对象 Object
    • 事件坐标详解
    • 常用函数
    • class类
    • Array 数组
    • 其他
    • blob下载文件
    • 深度克隆
    • 模块化
    • 常用工具函数
    • 拖拽
    • Map与Set
  • TypeScript

  • 前端基础
  • JavaScript
NeverStop1024
2022-11-10

blob下载文件

我们常用的请求库是基于fetch封装的,fetch返回的是字节流,axios默认res.json()做了解析,所以我们想用blob下载文件时,必须指定responseType: 'blob' 1.响应格式

export function time(data) {
  return axios({
    url: '/daochu',
    method: 'post',
    responseType: 'blob',// 1.首先设置responseType对象格式为 blob:
    data
  })
}
1
2
3
4
5
6
7
8

需要导出excel、csv、word、zip等类型,要带上对应的type来创建Blob对象,

后缀 MIMEType
.doc application/msword
.docx application/vnd.openxmlformatsofficedocument.wordprocessingml.document
.xls application/vnd.ms-excel
.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt application/vnd.ms-powerpoint
.pptx application/vnd.openxmlformats-officedocument.presentationml.presentation
time(obj).then((res) => {
  // 2.获取请求返回的response对象中的blob 设置文件类型,这里以excel为例
  let blob = new Blob([res.data], {
      // type 可以不用指定
    type: "application/vnd.ms-excel",
  });
  // 3.创建一个临时的url指向blob对象
  let objectUrl = window.URL.createObjectURL(blob);
  // 4.创建url之后可以模拟对此文件对象的一系列操作,例如:预览、下载
  let a = document.createElement("a");
  a.setAttribute("href", objectUrl);
  a.setAttribute("download", "表1.xlsx");
  a.click();
  // 5.释放这个临时的对象url
  window.URL.revokeObjectURL(url);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2023/07/05
其他
深度克隆

← 其他 深度克隆→

最近更新
01
mock使用
07-12
02
websocket即时通讯
07-12
03
前端面试题
07-09
更多文章>
Theme by Vdoing | Copyright © 2022-2023 NeverStop1024 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式