文件下载


前端文件下载方式按照后台接口返回形式大概分两种:一是后台返回url,二是后台返回文件流;

一、后台返回url方式

  获取到文件地址后,动态创建a标签,设置a标签的href属性值为url,download属性可选,

1 const dom = document.createElement("a");
2     dom.href = 'url';
3     dom.download = '文件名';
4   dom.target = 'top';// 如果是在iframe中打开需要加上该行 5 dom.click();

二、后台发回文件流

  向后台发送请求的时候,需要设置响应体,observe:'body',response:‘arrayBuffer’,这样就能获取到文件流,然后使用Blob对象将文件流转为blob对象,再使用URL.createObjectURL()将blob对象转化为url字符串。将url赋值给动态创建的a标签的href属性即可。

1 const blob = new Blob([res]);
2             const objectUrl = window.URL.createObjectURL(blob);
3             const a = document.createElement("a");
4             document.body.appendChild(a);
5             a.setAttribute("style", "display:none");
6             a.setAttribute("href", objectUrl);
7             a.setAttribute("download", "文件名");
8             a.click();
9             URL.revokeObjectURL(objectUrl);