前端下载文件的N种方式

a标签下载文件

优点：代码简单，只需要指定 url 就可以直接下载 缺点：无法监听文件是否下载完成，且无法监听错误信息。

let link = document.createElement('a')
link.style.display = 'none'
link.href = url;
link.click() // 触发下载

window.open下载文件

优点：代码简单，且可以监听文件下载是否完成。

缺点：

1. 需要另跳转一个空白页。
2. 同时当参数错误时，或其它原因导致接口请求失败，这时无法监听到接口返回的错误信息。
3. 需要保证请求必须是正确的且能正确返回数据流，不然打开页面会直接输出接口返回的错误信息，体验不好。

let net = window.open(url);
 net.addEventListener("beforeunload", e => {
     console.log(11111, e);
});

XML下载文件

优点：可以监听文件是否下载完成，且可以监听接口返回的错误信息。 缺点：代码太多。

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.responseType = "blob";
xhr.onprogress = function (event) {
  if (event.lengthComputable) {
    console.log(event.loaded);
    console.log(event.total);
  }
};
xhr.onload = function (oEvent) {
  console.log(oEvent);
  console.log(xhr.status);
  console.log(xhr.response);
  if (xhr.readyState === 4 && xhr.status === 200) {
    // var name = xhr.getResponseHeader("Content-disposition");
    // var filename = name.substring(20,name.length);
    var blob = new Blob([xhr.response], {type: 'video/mp4'});
    var csvUrl = URL.createObjectURL(blob);
    var link = document.createElement('a');
    link.href = csvUrl;
    link.download = 'abababababba.mp4';
    link.click();
  }
}
xhr.send();

END