最近在一个项目中碰到了下载附件的需求，自己撸了一下，效果不是很理想，文件类型，以及浏览器的兼容性，这方面处理的不是很好，于是寻找帮助，找到了一个downloadjs的npm包，然后自己分析源码，嘿嘿，以后就直接用了
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.download = factory();
}
}(this, function () {
//data表示要下载的数据，strFileName表示文件名,strMimeType表示文件的mineType
return function download(data, strFileName, strMimeType) {}
})
可以看到最后输出的实际是download的这个方法,可以直接使用，继续看
payload = data,
url = !strFileName && !strMimeType && payload
if(url && url.length< 2048){
fileName = url.split("/").pop().split("?")[0];
anchor.href = url; // assign href prop to temp anchor
if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
var ajax=new XMLHttpRequest();
ajax.open( "GET", url, true);
ajax.responseType = 'blob';
ajax.onload= function(e){
download(e.target.response, fileName, defaultMime);
};
setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
return ajax;
} // end if valid url?
} // end if url?
如果strFileName，strMimeType两个参数不传的话，参数形式就是url的形式，这个时候
会发送一个请求，得到这个url的二进制流，然后继续调我们download方法（阿西吧，这次才是正真正的调用）,继续看
if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(payload)){
// 如果是二进制格式的数据流，将其转换成二进制的对象
if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
payload=dataUrlToBlob(payload);
mimeType=payload.type || defaultMime;
}else{
// 如果浏览器支持的话，就直接下载，不支持的话，就我们自己写方法
return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:
navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
saver(payload) ; // everyone else can save dataURLs un-processed
}
将二进制流转换成二进制对象，继续看
function saver(url, winMode){
if ('download' in anchor) { //html5 A[download]
anchor.href = url;
anchor.setAttribute("download", fileName);
anchor.className = "download-js-link";
anchor.innerHTML = "downloading...";
anchor.style.display = "none";
document.body.appendChild(anchor);
setTimeout(function() {
anchor.click();
document.body.removeChild(anchor);
if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
}, 66);
return true;
}
// handle non-a[download] safari as best we can:
if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
if(/^data:/.test(url)) url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
if(!window.open(url)){ // popup blocked, offer direct download:
if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
}
return true;
}
//do iframe dataURL download (old ch+FF):
var f = document.createElement("iframe");
document.body.appendChild(f);
if(!winMode && /^data:/.test(url)){ // force a mime that will download:
url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
}
f.src=url;
setTimeout(function(){ document.body.removeChild(f); }, 333);
}
如果支持H5的download，就使用h5的方式，不然的话使用iframe的方式
总结下来就两步，第一步将需要下载的数据转换成二进制对象，第二步，将二进制的对象下载
