JS基于FileSaver.js插件实现文件保存功能示例 原创
本文实例讲述了JS基于FileSaver.js插件实现文件保存功能。分享给大家供大家参考,具体如下:
这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码:
/*!@sourcehttp://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js*/ varsaveAs=saveAs||function(e){"usestrict";if(typeofnavigator!=="undefined"&&/MSIE[1-9]\./.test(navigator.userAgent)){return}vart=e.document,n=function(){returne.URL||e.webkitURL||e},r=t.createElementNS("http://www.w3.org/1999/xhtml","a"),i="download"inr,o=function(e){vart=newMouseEvent("click");e.dispatchEvent(t)},a=/Version\/[\d\.]+.*Safari/.test(navigator.userAgent),f=e.webkitRequestFileSystem,u=e.requestFileSystem||f||e.mozRequestFileSystem,s=function(t){(e.setImmediate||e.setTimeout)(function(){throwt},0)},c="application/octet-stream",d=0,l=500,w=function(t){varr=function(){if(typeoft==="string"){n().revokeObjectURL(t)}else{t.remove()}};if(e.chrome){r()}else{setTimeout(r,l)}},p=function(e,t,n){t=[].concat(t);varr=t.length;while(r--){vari=e["on"+t[r]];if(typeofi==="function"){try{i.call(e,n||e)}catch(o){s(o)}}}},v=function(e){if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){returnnewBlob(["\ufeff",e],{type:e.type})}returne},y=function(t,s,l){if(!l){t=v(t)}vary=this,m=t.type,S=false,h,R,O=function(){p(y,"writestartprogresswritewriteend".split(""))},g=function(){if(R&&a&&typeofFileReader!=="undefined"){varr=newFileReader;r.onloadend=function(){vare=r.result;R.location.href="data:attachment/file"+e.slice(e.search(/[,;]/));y.readyState=y.DONE;O()};r.readAsDataURL(t);y.readyState=y.INIT;return}if(S||!h){h=n().createObjectURL(t)}if(R){R.location.href=h}else{vari=e.open(h,"_blank");if(i==undefined&&a){e.location.href=h}}y.readyState=y.DONE;O();w(h)},b=function(e){returnfunction(){if(y.readyState!==y.DONE){returne.apply(this,arguments)}}},E={create:true,exclusive:false},N;y.readyState=y.INIT;if(!s){s="download"}if(i){h=n().createObjectURL(t);r.href=h;r.download=s;setTimeout(function(){o(r);O();w(h);y.readyState=y.DONE});return}if(e.chrome&&m&&m!==c){N=t.slice||t.webkitSlice;t=N.call(t,0,t.size,c);S=true}if(f&&s!=="download"){s+=".download"}if(m===c||f){R=e}if(!u){g();return}d+=t.size;u(e.TEMPORARY,d,b(function(e){e.root.getDirectory("saved",E,b(function(e){varn=function(){e.getFile(s,E,b(function(e){e.createWriter(b(function(n){n.onwriteend=function(t){R.location.href=e.toURL();y.readyState=y.DONE;p(y,"writeend",t);w(e)};n.onerror=function(){vare=n.error;if(e.code!==e.ABORT_ERR){g()}};"writestartprogresswriteabort".split("").forEach(function(e){n["on"+e]=y["on"+e]});n.write(t);y.abort=function(){n.abort();y.readyState=y.DONE};y.readyState=y.WRITING}),g)}),g)};e.getFile(s,{create:false},b(function(e){e.remove();n()}),b(function(e){if(e.code===e.NOT_FOUND_ERR){n()}else{g()}}))}),g)}),g)},m=y.prototype,S=function(e,t,n){returnnewy(e,t,n)};if(typeofnavigator!=="undefined"&&navigator.msSaveOrOpenBlob){returnfunction(e,t,n){if(!n){e=v(e)}returnnavigator.msSaveOrOpenBlob(e,t||"download")}}m.abort=function(){vare=this;e.readyState=e.DONE;p(e,"abort")};m.readyState=m.INIT=0;m.WRITING=1;m.DONE=2;m.error=m.onwritestart=m.onprogress=m.onwrite=m.onabort=m.onerror=m.onwriteend=null;returnS}(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content);if(typeofmodule!=="undefined"&&module.exports){module.exports.saveAs=saveAs}elseif(typeofdefine!=="undefined"&&define!==null&&define.amd!=null){define([],function(){returnsaveAs})}
源码可读性不敢恭维,让我们用本站的JS在线工具:http://tools.jb51.net/code/js格式化一下,方便以后阅读研究。
格式化后的代码如下:
/*!@sourcehttp://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js*/ varsaveAs=saveAs|| function(e){ "usestrict"; if(typeofnavigator!=="undefined"&&/MSIE[1-9]\./.test(navigator.userAgent)){ return } vart=e.document, n=function(){ returne.URL||e.webkitURL||e }, r=t.createElementNS("http://www.w3.org/1999/xhtml","a"), i="download"inr, o=function(e){ vart=newMouseEvent("click"); e.dispatchEvent(t) }, a=/Version\/[\d\.]+.*Safari/.test(navigator.userAgent), f=e.webkitRequestFileSystem, u=e.requestFileSystem||f||e.mozRequestFileSystem, s=function(t){(e.setImmediate||e.setTimeout)(function(){ throwt }, 0) }, c="application/octet-stream", d=0, l=500, w=function(t){ varr=function(){ if(typeoft==="string"){ n().revokeObjectURL(t) }else{ t.remove() } }; if(e.chrome){ r() }else{ setTimeout(r,l) } }, p=function(e,t,n){ t=[].concat(t); varr=t.length; while(r--){ vari=e["on"+t[r]]; if(typeofi==="function"){ try{ i.call(e,n||e) }catch(o){ s(o) } } } }, v=function(e){ if(/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(e.type)){ returnnewBlob(["\ufeff",e],{ type:e.type }) } returne }, y=function(t,s,l){ if(!l){ t=v(t) } vary=this, m=t.type, S=false, h,R,O=function(){ p(y,"writestartprogresswritewriteend".split("")) }, g=function(){ if(R&&a&&typeofFileReader!=="undefined"){ varr=newFileReader; r.onloadend=function(){ vare=r.result; R.location.href="data:attachment/file"+e.slice(e.search(/[,;]/)); y.readyState=y.DONE; O() }; r.readAsDataURL(t); y.readyState=y.INIT; return } if(S||!h){ h=n().createObjectURL(t) } if(R){ R.location.href=h }else{ vari=e.open(h,"_blank"); if(i==undefined&&a){ e.location.href=h } } y.readyState=y.DONE; O(); w(h) }, b=function(e){ returnfunction(){ if(y.readyState!==y.DONE){ returne.apply(this,arguments) } } }, E={ create:true, exclusive:false }, N; y.readyState=y.INIT; if(!s){ s="download" } if(i){ h=n().createObjectURL(t); r.href=h; r.download=s; setTimeout(function(){ o(r); O(); w(h); y.readyState=y.DONE }); return } if(e.chrome&&m&&m!==c){ N=t.slice||t.webkitSlice; t=N.call(t,0,t.size,c); S=true } if(f&&s!=="download"){ s+=".download" } if(m===c||f){ R=e } if(!u){ g(); return } d+=t.size; u(e.TEMPORARY,d,b(function(e){ e.root.getDirectory("saved",E,b(function(e){ varn=function(){ e.getFile(s,E,b(function(e){ e.createWriter(b(function(n){ n.onwriteend=function(t){ R.location.href=e.toURL(); y.readyState=y.DONE; p(y,"writeend",t); w(e) }; n.onerror=function(){ vare=n.error; if(e.code!==e.ABORT_ERR){ g() } }; "writestartprogresswriteabort".split("").forEach(function(e){ n["on"+e]=y["on"+e] }); n.write(t); y.abort=function(){ n.abort(); y.readyState=y.DONE }; y.readyState=y.WRITING }),g) }),g) }; e.getFile(s,{ create:false }, b(function(e){ e.remove(); n() }),b(function(e){ if(e.code===e.NOT_FOUND_ERR){ n() }else{ g() } })) }),g) }),g) }, m=y.prototype, S=function(e,t,n){ returnnewy(e,t,n) }; if(typeofnavigator!=="undefined"&&navigator.msSaveOrOpenBlob){ returnfunction(e,t,n){ if(!n){ e=v(e) } returnnavigator.msSaveOrOpenBlob(e,t||"download") } } m.abort=function(){ vare=this; e.readyState=e.DONE; p(e,"abort") }; m.readyState=m.INIT=0; m.WRITING=1; m.DONE=2; m.error=m.onwritestart=m.onprogress=m.onwrite=m.onabort=m.onerror=m.onwriteend=null; returnS }(typeofself!=="undefined"&&self||typeofwindow!=="undefined"&&window||this.content); if(typeofmodule!=="undefined"&&module.exports){ module.exports.saveAs=saveAs }elseif(typeofdefine!=="undefined"&&define!==null&&define.amd!=null){ define([], function(){ returnsaveAs }) }
使用的时候非常简单,代码如下所示:
varblob=newBlob(['out_put_string'],{type:"text/plain;charset=utf-8"});//out_put_string为需要保存到文件的字符串内容 saveAs(blob,"filename.php");//filename.php为保存的文件名
PS:本站在线工具《PHP代码在线格式化美化工具》中的保存文本功能使用的就是FileSaver.js插件实现的。感兴趣的朋友可以参考一下:
http://tools.jb51.net/code/phpformat
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript扩展技巧总结》、《JavaScript文件与目录操作技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。