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

唯见长江天际流
  • 636

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

回复
阅读 2.3k
3 个回答

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

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

之前遇到过这个问题,写过一个函数:

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);
  });
}

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

宣传栏