前端项目是如何实现文件下载的？

在业务开发中，我想大多数同学可能会遇到关于实现文件下载这方面的需求，例如说通过点击某一个小按钮或者标签来实现触发浏览器的下载功能

这里我先使用koa2作为后端，起一个小小的Demo

在这个Demo中我写了一个请求文件流的Api，当客户端向这个Api进行请求数据后，服务器端会返回一个File

接下来是前端部分了，我们用pnpm create vite快速起一个项目，这里我就不再演示这个过程了

我简单的写了一个按钮并绑定了对应的请求函数，我们来看看network中报文会返回什么数据

原来是跨域了，我们在vite.config.ts中处理一下，通过设置代理的方式来解决跨域问题

接下来，我再请求一次看看

现在，服务器也将我们想要的文件返回的过来，但是作为用户我是要下载这个文件，而不是在请求中看到这个文件的内容

我们预期是效果应该是通过浏览器来下载这个文件

问题不大，我们写一个小小的函数简单的解决这个问题

typescript 复制代码

function streamToDownloadFile(data: BlobPart, filename: string,type: string= 'application/octet-stream') {
  let blob = new Blob([data], { type });
  let url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  // 重命名文件
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

const download = () => {
  console.log('download');
  axios.get('/api/download/foo').then(res => {
    // 触发浏览器下载机制
    streamToDownloadFile(res.data, 'foo.txt')
  })
}