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判断变量是否未定义的代码
Mar 28 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
小程序自动化测试的示例代码
Aug 11 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
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更快的提供文件下载的代码
2012/06/13 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
Augularjs-起步详解
2016/07/08 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
React快速入门教程
2017/01/17 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python socket模块方法实现详解
2019/11/05 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
五种Python转义表示法
2020/11/27 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
学校四群教育实施方案
2014/06/12 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2019各种承诺书范文
2019/06/24 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技