JS基于FileSaver.js插件实现文件保存功能示例 <font color=red>原创</font>

本文实例讲述了JS基于FileSaver.js插件实现文件保存功能分享给大家供大家参考,具体如下:

这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码:

代码如下:
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(){throw t},0)},c="application/octet-stream",d=0,l=500,w=function(t){var r=function(){if(typeof t==="string"){n().revokeObjectURL(t)}else{t.remove()}};if(e.chrome){r()}else{setTimeout(r,l)}},p=function(e,t,n){t=[].concat(t);var r=t.length;while(r--){var i=e["on"+t[r]];if(typeof i==="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)){return new Blob(["\ufeff",e],{type:e.type})}return e},y=function(t,s,l){if(!l){t=v(t)}var y=this,m=t.type,S=false,h,R,O=function(){p(y,"writestart progress write writeend".split(" "))},g=function(){if(R&&a&&typeof FileReader!=="undefined"){var r=new FileReader;r.onloadend=function(){var e=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{var i=e.open(h,"_blank");if(i==undefined&&a){e.location.href=h}}y.readyState=y.DONE;O();w(h)},b=function(e){return function(){if(y.readyState!==y.DONE){return e.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,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){var n=function(){e.getFile(s,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(){var e=n.error;if(e.code!==e.ABORT_ERR){g()}};"writestart progress write abort".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)},m=y.prototype,S=function(e,n){return new y(e,n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,n){if(!n){e=v(e)}return navigator.msSaveOrOpenBlob(e,t||"download")}}m.abort=function(){var e=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;return S}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!=null){define([],function(){return saveAs})}

源码可读性不敢恭维,让我们用本站的JS在线工具:http://tools.jb51.cc/code/js 格式化一下,方便以后阅读研究。

格式化后的代码如下:

rush:js;"> /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs = saveAs || function(e) { "use strict"; if (typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) { return } var t = e.document,n = function() { return e.URL || e.webkitURL || e },r = t.createElementNS("http://www.w3.org/1999/xhtml",i = "download" in r,o = function(e) { var t = new MouseEvent("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() { throw t },0) },c = "application/octet-stream",d = 0,l = 500,w = function(t) { var r = function() { if (typeof t === "string") { n().revokeObjectURL(t) } else { t.remove() } }; if (e.chrome) { r() } else { setTimeout(r,l) } },p = function(e,n) { t = [].concat(t); var r = t.length; while (r--) { var i = e["on" + t[r]]; if (typeof i === "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)) { return new Blob(["\ufeff",{ type: e.type }) } return e },y = function(t,l) { if (!l) { t = v(t) } var y = this,m = t.type,S = false,O = function() { p(y,"writestart progress write writeend".split(" ")) },g = function() { if (R && a && typeof FileReader !== "undefined") { var r = new FileReader; r.onloadend = function() { var e = 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 { var i = e.open(h,"_blank"); if (i == undefined && a) { e.location.href = h } } y.readyState = y.DONE; O(); w(h) },b = function(e) { return function() { if (y.readyState !== y.DONE) { return e.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,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,b(function(e) { e.root.getDirectory("saved",b(function(e) { var n = function() { e.getFile(s,b(function(e) { e.createWriter(b(function(n) { n.onwriteend = function(t) { R.location.href = e.toURL(); y.readyState = y.DONE; p(y,t); w(e) }; n.onerror = function() { var e = n.error; if (e.code !== e.ABORT_ERR) { g() } }; "writestart progress write abort".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,n) { return new y(e,n) }; if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) { return function(e,n) { if (!n) { e = v(e) } return navigator.msSaveOrOpenBlob(e,t || "download") } } m.abort = function() { var e = 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; return S } (typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content); if (typeof module !== "undefined" && module.exports) { module.exports.saveAs = saveAs } else if (typeof define !== "undefined" && define !== null && define.amd != null) { define([],function() { return saveAs }) }

使用的时候非常简单,代码如下所示:

rush:js;"> var blob = new Blob(['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.cc/code/phpformat

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...