前端下载文件

前端下载文件

使用 a 标签 download 功能 (如果跨域，href 的参数需是完整的 url)

跨域问题：浏览器是采用的是同源策略（即同一域），来保障浏览器安全性。 若协议，域名，端口号任有一个不同，即为跨域 详见链接

1.后端返回该文件的 url。

原生 js 模拟点击链接下载

  let url =
  'https://image.baidu.com/search/down?tn=download&ipn=dwnl&word=download&ie=utf8&fr=result&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fpic3.zhimg.com%252Fv2-89cb25b13b936bd40233ce464c3ffaac_1200x500.jpg%26refer%3Dhttp%253A%252F%252Fpic3.zhimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1644560889%26t%3D5b618e3ce78fa2f2091ac24e6db1b3a8&thumburl=https%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D2161465592%2C114811055%26fm%3D253%26fmt%3Dauto%26app%3D138%26f%3DJPEG%3Fw%3D625%26h%3D325';
let a = document.createElement('a');
a.download = fileName; //文件名
a.href = url;

a.click();
a.remove();

/*
HTMLElement.remove()
该方法IE浏览器不支持
可换成
document.body.appendChild(a)
document.body.removeChild(a)
*/

2. 后端返回二进制流文件

设置请求配置中返回类型为 blob

request({ url, method, data, responseType: 'blob' }) //重点设置请求配置中返回类型为 blob

解析blob响应内容并下载

let aLink = document.createElement('a');
aLink.href = URL.createObjectURL(new Blob([res])); //res为响应的二进制流文件
//URL.createObjectURL()不用的时候需要调用URL.revokeObjectURL()手动释放内存来节省性能
//以下两种方法二选一
//1.较简单（但IE浏览器不兼容remove()方法）
aLink.click();
aLink.remove();

//2.所有浏览器都兼容
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
URL.revokeObjectURL(aLink.href);

//附加：设置文件名
if (!filename) {
  // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  const patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
  const contentDisposition = decodeURI(res.headers["content-disposition"]);
  const result = patt.exec(contentDisposition);
  fileName = result?.[1] || "";
}

aLink.setAttribute("download", fileName); // 设置下载文件名称