客户端文件下载 download.js
download()函数的作用是触发从JavaScript下载文件。它指定放置在浏览器下载目录中的新文件的内容和名称。输入可以是字符串、Blob或类型化数据数组,也可以通过data url将文件数据表示为base64或url编码的字符串。无论输入格式如何,download()使用指定的文件名和mime信息保存文件的方式与使用内容处理HTTP头的服务器相同。
1 <button onclick="dlBinAjax()">binary ajax Blob</button> 2 function dlBinAjax(){ 3 var x=new XMLHttpRequest(); 4 x.open("GET", "http://danml.com/wave2.gif", true); 5 x.responseType = 'blob'; 6 x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/gif" ); } 7 x.send(); 8 }
download.js代码
1 <script>//download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage 2 // v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime 3 // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs 4 // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling. 5 // v4 adds AMD/UMD, commonJS, and plain browser support 6 // v4.1 adds url download capability via solo URL argument (same domain/CORS only) 7 // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors 8 // https://github.com/rndme/download 9 10 (function (root, factory) { 11 if (typeof define === 'function' && define.amd) { 12 // AMD. Register as an anonymous module. 13 define([], factory); 14 } else if (typeof exports === 'object') { 15 // Node. Does not work with strict CommonJS, but 16 // only CommonJS-like environments that support module.exports, 17 // like Node. 18 module.exports = factory(); 19 } else { 20 // Browser globals (root is window) 21 root.download = factory(); 22 } 23 }(this, function () { 24 25 return function download(data, strFileName, strMimeType) { 26 27 var self = window, // this script is only for browsers anyway... 28 defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads 29 mimeType = strMimeType || defaultMime, 30 payload = data, 31 url = !strFileName && !strMimeType && payload, 32 anchor = document.createElement("a"), 33 toString = function(a){return String(a);}, 34 myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString), 35 fileName = strFileName || "download", 36 blob, 37 reader; 38 myBlob= myBlob.call ? myBlob.bind(self) : Blob ; 39 40 if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback 41 payload=[payload, mimeType]; 42 mimeType=payload[0]; 43 payload=payload[1]; 44 } 45 46 47 if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument 48 fileName = url.split("/").pop().split("?")[0]; 49 anchor.href = url; // assign href prop to temp anchor 50 if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path: 51 var ajax=new XMLHttpRequest(); 52 ajax.open( "GET", url, true); 53 ajax.responseType = 'blob'; 54 ajax.onload= function(e){ 55 download(e.target.response, fileName, defaultMime); 56 }; 57 setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return: 58 return ajax; 59 } // end if valid url? 60 } // end if url? 61 62 63 //go ahead and download dataURLs right away 64 if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){ 65 66 if(payload.length > (1024*1024*1.999) && myBlob !== toString ){ 67 payload=dataUrlToBlob(payload); 68 mimeType=payload.type || defaultMime; 69 }else{ 70 return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs: 71 navigator.msSaveBlob(dataUrlToBlob(payload), fileName) : 72 saver(payload) ; // everyone else can save dataURLs un-processed 73 } 74 75 }//end if dataURL passed? 76 77 blob = payload instanceof myBlob ? 78 payload : 79 new myBlob([payload], {type: mimeType}) ; 80 81 82 function dataUrlToBlob(strUrl) { 83 var parts= strUrl.split(/[:;,]/), 84 type= parts[1], 85 decoder= parts[2] == "base64" ? atob : decodeURIComponent, 86 binData= decoder( parts.pop() ), 87 mx= binData.length, 88 i= 0, 89 uiArr= new Uint8Array(mx); 90 91 for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i); 92 93 return new myBlob([uiArr], {type: type}); 94 } 95 96 function saver(url, winMode){ 97 98 if ('download' in anchor) { //html5 A[download] 99 anchor.href = url; 100 anchor.setAttribute("download", fileName); 101 anchor.className = "download-js-link"; 102 anchor.innerHTML = "downloading..."; 103 anchor.style.display = "none"; 104 document.body.appendChild(anchor); 105 setTimeout(function() { 106 anchor.click(); 107 document.body.removeChild(anchor); 108 if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );} 109 }, 66); 110 return true; 111 } 112 113 // handle non-a[download] safari as best we can: 114 if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) { 115 url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime); 116 if(!window.open(url)){ // popup blocked, offer direct download: 117 if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; } 118 } 119 return true; 120 } 121 122 //do iframe dataURL download (old ch+FF): 123 var f = document.createElement("iframe"); 124 document.body.appendChild(f); 125 126 if(!winMode){ // force a mime that will download: 127 url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime); 128 } 129 f.src=url; 130 setTimeout(function(){ document.body.removeChild(f); }, 333); 131 132 }//end saver 133 134 135 136 137 if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL) 138 return navigator.msSaveBlob(blob, fileName); 139 } 140 141 if(self.URL){ // simple fast and modern way using Blob and URL: 142 saver(self.URL.createObjectURL(blob), true); 143 }else{ 144 // handle non-Blob()+non-URL browsers: 145 if(typeof blob === "string" || blob.constructor===toString ){ 146 try{ 147 return saver( "data:" + mimeType + ";base64," + self.btoa(blob) ); 148 }catch(y){ 149 return saver( "data:" + mimeType + "," + encodeURIComponent(blob) ); 150 } 151 } 152 153 // Blob but not URL support: 154 reader=new FileReader(); 155 reader.onload=function(e){ 156 saver(this.result); 157 }; 158 reader.readAsDataURL(blob); 159 } 160 return true; 161 }; /* end download() */ 162 }));</script>