关于前端下载

关于本文

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

正文

关于前端下载文件，有两种方案：

• 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的对象看了下，如下：
  
  这个对象其实包含了本次请求响应的各种信息，响应头、url、状态等等；然后默认提供了很多对数据的处理形式，比如：json、text、blob、formData等。有点自带拦截器一样的感觉，默认做了一层封装。