首页 > 开发 > JS > 正文

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

2024-05-06 16:43:08
字体:
来源:转载
供稿:网友

本文实例讲述了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 windowif (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; });}

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


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表