[原创]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 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Vue分页效果与购物车功能
Dec 13 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
《美丽的黄昏》教学反思
2014/02/28 职场文书
申论倡议书范文
2014/05/13 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
开幕式邀请函
2015/01/31 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
MySQL 条件查询的常用操作
2022/04/28 MySQL