文件下载
前端文件下载方式按照后台接口返回形式大概分两种:一是后台返回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);