[JS]前端下载的实现

版权声明

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

起因

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

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);}

交流

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