文件流形式下载文件，并从响应头获取文件名

c_Janz

于 2020-07-17 13:41:17 发布

阅读量2.3k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/c_Janz/article/details/107406285

版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用XMLHttpRequest导出流文件的方法，通过读取响应头的'content-disposition'来获取文件名。具体实现涉及设置HTTP请求、处理响应并创建下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 导出流文件, 从响应头获取文件名
export const exportStreamFile = (url:string) => {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open('get',url,true);
    xhr.responseType = 'blob';
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(true)
        const data = xhr.response;
        const blob = new Blob([data]);
        let url = window.URL.createObjectURL(blob);
        let a = document.createElement('a');
        document.body.appendChild(a);
        let fileName = decodeURI(
          xhr?.getResponseHeader('content-disposition')?.split(';')[1].split('=')[1] || '',
        );
        a.href = url;
        a.download = fileName as string;
        a.click();
        window.URL.revokeObjectURL(url);
      }
    };
    xhr.send();
  })
}