关于本文

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

正文

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

• 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等。有点自带拦截器一样的感觉，默认做了一层封装。