js下载文件 文件名获取

Caps_chen
662 阅读2分钟

下载文件

流程

  1. 接口获取二进制数据
    • 设置接口的响应类型（responseType）为ArrayBuffer
  2. 将二进制数据转为二进制对象（blob）
const blob = new Blob([ArrayBuffer[]]);
  1. 将二进制对象转为下载链接（url）
/*
  createObjectURL会为传入的对象创建一个url
*/
const href = URL.createObjectURL(blob);

createObjectRUL文档

  1. 动态创建a标签下载对应链接文件,然后 释放URL 对象，删除a标签
const eLink = document.createElement('a');
eLink.style.display = 'none';
eLink.setAttribute('download', name || resBlob?.fileName);
eLink.href = href
document.body.appendChild(eLink);
eLink.click();
URL.revokeObjectURL(eLink.href); // 释放URL 对象
document.body.removeChild(eLink);

##完整代码

function downloadFile(resBlob: any, name?: string) {
 const blob = new Blob([resBlob]);
 const eLink = document.createElement('a');
 eLink.style.display = 'none';
 eLink.setAttribute('download', name || resBlob?.fileName);
 eLink.href = URL.createObjectURL(blob);
 document.body.appendChild(eLink);
 eLink.click();
 URL.revokeObjectURL(eLink.href); // 释放URL 对象 需要手动释放
 document.body.removeChild(eLink);
}

设置文件名

有时候文件名需要使用后端返回的文件名，因为接口返回的是二进制数据，所以无法从响应体中获取，需要通过后端配合，将文件名放在响应头中，然后前端通过读取响应头获取。

image.png

前端只需要通过键值对的方法从请求头中拿到对应的文件名就可以了。

需要注意的是因为请求头中在数据传输的时候会对无法识别的字符乱码处理（中文以及一些特殊字符），所以需要后端先将该字段的值转码，并且设置对应的编码格式，然后前端再进行解码就可以拿到想要的内容了。

对于前端来说最好是转码成url编码格式，因为js有对应的api用来对这种格式编码、解码；

编码解码API

解码编码有两个API

image.png

encodeURI：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。  该方法的目的是对 URI 进行完整的编码，因此对以下在 URI 中具有特殊含义的 ASCII 标点符号，encodeURI() 函数是不会进行转义的：;/?:@&=+$,# 

提示：如果 URI 组件中含有分隔符，比如?和 #，则应当使用 encodeURIComponent() 方法分别对各组件进行编码。

encodeURIComponent：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。 其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

avatar
文章
阅读
粉丝