关于前端下载

关于本文

记录如何在前端来下载文件的几种解决方案

正文

关于前端下载文件,有两种方案:

  • 1.不发请求:使用a标签设置 download 后去访问下载url,浏览器会自动开始下载
  • 2.发请求,然后拿到blob数据,创建一个blob的url,通过a去访问该url,设置 download 下载

代码演示

以下示范的后端代码

router.get('/dolFile', function (req, res, next) {
  const ops = {
    'Content-Type': 'image/png'
  }
  res
    .status(200)
    .sendFile(path.join(__dirname, 'p-1.jpg'))
});

不发送请求

<button id="btn">下载</button>
<script>
  // 获取下载按钮
  const dolBtn = document.querySelector("#btn")
  // 下载函数
  const dolFile = (url) => {
    // 创建a标签
    const a = document.createElement('a')
    // 为a标签设置请求地址和下载属性
    a.setAttribute('href', url)
    // 该参数提供一个值 为该文件保存的默认名
    a.setAttribute('download', '图片')
    // 添加到页面
    document.body.appendChild(a)
    // 点击该a标签进行下载
    a.click()
    // 最后要卸载该dom
    a.remove()
  }
  dolBtn.addEventListener('click', () => {
    dolFile('http://localhost:3000/api/dolFile')
  })
</script>

发送请求

<button id="btn">下载</button>
<script>
  // 获取下载按钮
  const dolBtn = document.querySelector("#btn")
  // 下载函数
  const dolFile = (url) => {
      let data = await fetch('http://localhost:3000/api/dolFile')
        .then(res => {
          // 直接返回一个blob即可
          return res.blob()
        })
      var a = document.createElement('a');
      //文件的名称为时间戳加文件名后缀
      a.download = `${+new Date()}.jpg`;
      // 创建一个blob链接 理解成类似base64那样的
      a.href = URL.createObjectURL(data);
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  }
  dolBtn.addEventListener('click', () => {
    dolFile('http://localhost:3000/api/dolFile')
  })
</script>

其他

关于Blob

  • 是web提供的一个对象,表示一个不可变、原始数据的类文件对象。数据按二进制或文本读存
  • 一般包含2个属性:size :文件大小, type:文件类型
  • 使用场景:大文件分割上传、上述场景一样作为一个url去下载文件
  • MDN-Blob
  • 一文学会Blob

URL对象

  • 用于解析,构造,规范化和编码
  • URL

关于fetch

  • 因为一直习惯了 axios 不太理解为什么fetch,一直需要第一个then,接着这个时候打印了第一个then的callback的对象看了下,如下:
    fetch_res
    这个对象其实包含了本次请求响应的各种信息,响应头、url、状态等等;然后默认提供了很多对数据的处理形式,比如:json、text、blob、formData等。有点自带拦截器一样的感觉,默认做了一层封装。

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!