下载文件流文件名转码

大海溶黄昏

已于 2022-12-05 15:27:53 修改

阅读量1k

点赞数 1

分类专栏：文件下载文章标签：前端 javascript

于 2022-12-05 15:26:31 首次发布

本文链接：https://blog.csdn.net/lv_xiao_xiao/article/details/128187369

版权

文件下载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下载文件，后端返回文件流，前端下载并读取后端返回文件名content-disposition

后端接口返回content-disposition：

前端读取文件名并下载

1.axios返回请求响应全部数据

service.interceptors.response.use((response: AxiosResponse) => {
  const result = response.data;
  const { config: { responseType } } = response;
  if (responseType === 'blob') {
    return response;
  }

2.接口调用返回中读取解码：decodeURI(fileName)

getExport().then((res:any) => {
          const fileName = res.headers['content-disposition'].split(';')[1].split('filename=')[1];
// 转换编译content-disposition的文件名：decodeURI
          downloadFile(decodeURI(fileName), res.data);
        });

3.文档流下载方法

export function downloadFile(fileName:string, content:Blob, unicode = 'application/octet-stream;charset=utf-8'):void {
  // const blob = new Blob([content], { type: unicode });
  if ('download' in document.createElement('a')) { // 非IE下载
    const downloadElement = document.createElement('a');
    let href = '';
    if (window.URL) {
      href = window.URL.createObjectURL(content);
    } else {
      href = window.webkitURL.createObjectURL(content);
    }
    downloadElement.href = href;
    downloadElement.download = fileName;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    if (window.URL) {
      window.URL.revokeObjectURL(href);
    } else {
      window.webkitURL.revokeObjectURL(href);
    }
    document.body.removeChild(downloadElement);
  }