[JS]前端下载的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/greatbody/article/details/70207232

版权声明

本文是在家中思考，查阅互联网开源文献综合实验后得出的，版权：公开

起因

之前一直纠结前端下载是不是触发了浏览器的下载就完成了？后来上网百度了一下，发现并不是的。还是可以追踪到的。

referrer

[1] 用JS在浏览器中创建下载文件
[2] initEvent() 方法
[3] binary-xhr
[4] JS中decodeURI()与decodeURIComponent()区别

思考实现

function download(url) {
  var xhr = new XMLHttpRequest();
  xhr.onprogress = function (ev) {
    console.log('process', ev);
  };
  xhr.onreadystatechange = function () {
    console.log('state:' + xhr.readyState, 'status', xhr.status);
    var fileName = "undefine_file";
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        downloadFile(fileNameFromHeader(xhr.getResponseHeader("Content-Disposition")), xhr.response);
      } else {
        alert('error:' + xhr.status);
      }
    }
  };
  xhr.onerror = xhr.ontimeout = function() {
    console.log('error', arguments);
  };
  xhr.open("get", url, true);
  xhr.responseType = 'arraybuffer';
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.send(null);
}

function fileNameFromHeader(disposition) {
  var result = null;
  if (disposition && /filename="(.*?)"/ig.test(disposition)) {
    result = /filename="(.*?)"/ig.exec(disposition);
    return decodeURI(result[1]);
  }
  return "undefine_file";
}

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}

交流

有任何疑问，欢迎留言交流。