如何实现fetch请求返回一个文件，浏览器可以直接下载？

Question

前端发一个fetch请求，get或者post，服务端返回一个文件，怎么设置http的响应头可以使浏览器开始下载任务。

Answer 1

一种是 location.url ，配合的请求头因该是'Content-Type': 'application/octet-stream',但是ajax并不会识别这个请求，原因我就不清楚了，你看下上一个人的回答。如果已经通过fetch获取到资源了，可以通过URL.createObjectURL生成资源的内容url。URL.createObjectURL()用法，这个时候你可以创建a标签，然后绑定这个url，并用js调用点击方法，也可以达到下载的目的。

Answer 2

ajax无法下载文件，因为它只能处理字符串，虽然能拿到二进制流，但调用不了浏览器的下载功能，浏览器限制了，下载只能通过location.url这种方式实现。

Answer 3

之前遇到过这个问题，写过一个函数：

export async function downloadFile(params) {
  return postJson('/api/for/download', params, 'blob').then((res) => {
    let url = URL.createObjectURL(new Blob([res]));
    let filename = `${params.xxx}.xlsx`;  // 这里根据你的实际文件情况替换
    let a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  });
}

前端可以通过一个下载按钮触发这个函数，然后完成下载。