[原创]JS基于FileSaver.js插件实现文件保存功能示例


Posted in Javascript onDecember 08, 2016

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

这里介绍一款js插件用法非常简单,先来看看FileSaver.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","a"),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,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,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){var n=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(){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,t,n){return new y(e,t,n)};if(typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob){return function(e,t,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.3water.com/code/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", "a"),
  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, 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, 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) {
        var n = 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() {
                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, t, n) {
    return new y(e, t, n)
  };
  if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
    return function(e, t, 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
  })
}

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

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插件实现的。感兴趣的朋友可以参考一下:

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

Javascript 相关文章推荐
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 #Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 #Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 #Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 #Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 #Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 #Javascript
You might like
BBS(php & mysql)完整版(四)
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript 一些用法小结
2009/09/11 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python 除法小技巧
2008/09/06 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
优秀士兵个人事迹材料
2014/01/19 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
MySQL的索引你了解吗
2022/03/13 MySQL
Consul在linux环境的集群部署
2022/04/08 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS