JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】


Posted in Javascript onMarch 15, 2018

本文实例讲述了JavaScript实现写入文件到本地的方法。分享给大家供大家参考,具体如下:

工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的。

IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题。

那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求。下面看一段具体的代码吧:

/**
 * 下载文件
 */
var downloadTextFile = function(mobileCode) {
  if(isEmpty(mobileCode)) {
    mobileCode = '';
  }
  var file = new File([mobileCode], "手机号.txt", { type: "text/plain;charset=utf-8" });
  saveAs(file);
}

这个示例是向本地存储一个名字叫“手机号.txt”的文本文件,采用的字符编码格式为“UTF-8”,这样就避免的中文乱码的问题。聪明的你也赶快试试吧!

附 FileSaver.js 文件的完整源码:

/* FileSaver.js
 * A saveAs() FileSaver implementation.
 * 1.3.2
 * 2016-06-16 18:25:19
 *
 * By Eli Grey, http://eligrey.com
 * License: MIT
 *  See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
 */
/*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs || (function(view) {
  "use strict";
  // IE <10 is explicitly unsupported
  if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) {
    return;
  }
  var
     doc = view.document
     // only get URL when necessary in case Blob.js hasn't overridden it yet
    , get_URL = function() {
      return view.URL || view.webkitURL || view;
    }
    , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
    , can_use_save_link = "download" in save_link
    , click = function(node) {
      var event = new MouseEvent("click");
      node.dispatchEvent(event);
    }
    , is_safari = /constructor/i.test(view.HTMLElement) || view.safari
    , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
    , throw_outside = function(ex) {
      (view.setImmediate || view.setTimeout)(function() {
        throw ex;
      }, 0);
    }
    , force_saveable_type = "application/octet-stream"
    // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to
    , arbitrary_revoke_timeout = 1000 * 40 // in ms
    , revoke = function(file) {
      var revoker = function() {
        if (typeof file === "string") { // file is an object URL
          get_URL().revokeObjectURL(file);
        } else { // file is a File
          file.remove();
        }
      };
      setTimeout(revoker, arbitrary_revoke_timeout);
    }
    , dispatch = function(filesaver, event_types, event) {
      event_types = [].concat(event_types);
      var i = event_types.length;
      while (i--) {
        var listener = filesaver["on" + event_types[i]];
        if (typeof listener === "function") {
          try {
            listener.call(filesaver, event || filesaver);
          } catch (ex) {
            throw_outside(ex);
          }
        }
      }
    }
    , auto_bom = function(blob) {
      // prepend BOM for UTF-8 XML and text/* types (including HTML)
      // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
      if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
        return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
      }
      return blob;
    }
    , FileSaver = function(blob, name, no_auto_bom) {
      if (!no_auto_bom) {
        blob = auto_bom(blob);
      }
      // First try a.download, then web filesystem, then object URLs
      var
         filesaver = this
        , type = blob.type
        , force = type === force_saveable_type
        , object_url
        , dispatch_all = function() {
          dispatch(filesaver, "writestart progress write writeend".split(" "));
        }
        // on any filesys errors revert to saving with object URLs
        , fs_error = function() {
          if ((is_chrome_ios || (force && is_safari)) && view.FileReader) {
            // Safari doesn't allow downloading of blob urls
            var reader = new FileReader();
            reader.onloadend = function() {
              var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
              var popup = view.open(url, '_blank');
              if(!popup) view.location.href = url;
              url=undefined; // release reference before dispatching
              filesaver.readyState = filesaver.DONE;
              dispatch_all();
            };
            reader.readAsDataURL(blob);
            filesaver.readyState = filesaver.INIT;
            return;
          }
          // don't create more object URLs than needed
          if (!object_url) {
            object_url = get_URL().createObjectURL(blob);
          }
          if (force) {
            view.location.href = object_url;
          } else {
            var opened = view.open(object_url, "_blank");
            if (!opened) {
              // Apple does not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.html
              view.location.href = object_url;
            }
          }
          filesaver.readyState = filesaver.DONE;
          dispatch_all();
          revoke(object_url);
        }
      ;
      filesaver.readyState = filesaver.INIT;
      if (can_use_save_link) {
        object_url = get_URL().createObjectURL(blob);
        setTimeout(function() {
          save_link.href = object_url;
          save_link.download = name;
          click(save_link);
          dispatch_all();
          revoke(object_url);
          filesaver.readyState = filesaver.DONE;
        });
        return;
      }
      fs_error();
    }
    , FS_proto = FileSaver.prototype
    , saveAs = function(blob, name, no_auto_bom) {
      return new FileSaver(blob, name || blob.name || "download", no_auto_bom);
    }
  ;
  // IE 10+ (native saveAs)
  if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
    return function(blob, name, no_auto_bom) {
      name = name || blob.name || "download";
      if (!no_auto_bom) {
        blob = auto_bom(blob);
      }
      return navigator.msSaveOrOpenBlob(blob, name);
    };
  }
  FS_proto.abort = function(){};
  FS_proto.readyState = FS_proto.INIT = 0;
  FS_proto.WRITING = 1;
  FS_proto.DONE = 2;
  FS_proto.error =
  FS_proto.onwritestart =
  FS_proto.onprogress =
  FS_proto.onwrite =
  FS_proto.onabort =
  FS_proto.onerror =
  FS_proto.onwriteend =
    null;
  return saveAs;
}(
    typeof self !== "undefined" && self
  || typeof window !== "undefined" && window
  || this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window
if (typeof module !== "undefined" && module.exports) {
 module.exports.saveAs = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) {
 define("FileSaver.js", function() {
  return saveAs;
 });
}

PS:本站在线工具http://tools.3water.com上面工具中的很多文件下载功能都是基于FileSaver.js插件实现的,感兴趣的朋友可以查找参考一下。

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

Javascript 相关文章推荐
js实现jquery的offset()方法实例
Jan 10 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
VUE安装使用教程详解
Jun 03 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 #Javascript
Angularjs Promise实例详解
Mar 15 #Javascript
p5.js入门教程和基本形状绘制
Mar 15 #Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 #Javascript
vue之浏览器存储方法封装实例
Mar 15 #Javascript
vue实现提示保存后退出的方法
Mar 15 #Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 #Javascript
You might like
PHP微信开发之模板消息回复
2016/06/24 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
拖拉表格的JS函数
2008/11/20 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python基础教程之Filter使用方法
2017/01/17 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国钻石公司:British Diamond Company
2020/02/16 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
法定代表人资格证明书
2014/09/11 职场文书
施工安全协议书范本
2014/09/26 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
家长反馈意见及建议
2015/06/03 职场文书
在校学生证明格式
2015/06/24 职场文书