使用 fetch 方法下载后端文件

在 web 页面中使用原生 window.fetch 下载后端文件。

过程分析

  1. fetch url;
  2. 解析 blob 数据;
  3. response header 中解析文件名;
  4. 动态创建 a 标签,利用 download 进行下载;
  5. blob 数据转成 data uri, 赋值给 a href .

源码

Gist Code

async function download (url = '', headers = {}) {
  try {
    const res = await fetch(url, {
      headers
    })
    const blob = await res.blob()
    // 获取后端headers里面的文件名
    const filename = decodeURI(res.headers.get('Content-Disposition').split('filename=')[1])
    // download
    const a = document.createElement('a')
    a.download = filename
    a.style.display = 'none'
    a.href = window.URL.createObjectURL(blob)
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  } catch (err) {
    console.error(err)
    // toast error message
  }
}
展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值