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程序设计有所帮助。