首页 > 编程 > JavaScript > 正文

js基于FileSaver.js 浏览器导出Excel文件的示例

2019-11-19 15:47:49
字体:
来源:转载
供稿:网友

本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记

限制一:不同浏览器对 blob 对象有不同的限制

具体看看下面这个表格(出自FileSaver.js):

Browser Constructs as Filenames Max Blob Size Dependencies
Firefox 20+ Blob Yes 800 MiB None
Firefox < 20 data: URI No n/a Blob.js
Chrome Blob Yes 500 MiB None
Chrome for Android Blob Yes 500 MiB None
Edge Blob Yes ? None
IE 10+ Blob Yes 600 MiB None
Opera 15+ Blob Yes 500 MiB None
Opera < 15 data: URI No n/a Blob.js
Safari 6.1+* Blob No ? None
Safari < 6 data: URI No n/a Blob.js

限制二:构建完 blob 对象后才会转换成文件

这一点限制对小文件(几十kb)可能没什么影响,但对稍微大一点的文件影响就很大了。试想,用户要下载一个 100mb 的文件,如果他点击了下载按钮之后没看到下载提示的话,他肯定会继续按,等他按了几次之后还没看到下载提示时,他就会抱怨我们的网站,然后离开了。

然而事实上下载的的确确发生了,只是要等到下载完文件之后才能构建 blob 对象,再转化成文件。而且,用户再触发多几次下载就会造成一些资源上的浪费。

因此,如果是要下载大文件的话,还是推荐直接创建一个 <a> 标签拉~
写 html 也好,写 JavaScript 动态创建也好,用自己喜欢的方式去创建就好了。

FileSaver.js 

/* FileSaver.js * A saveAs() FileSaver implementation. * 1.3.2 * 2016-06-16 18:25:19 * * 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; });}

调用方法

 function expToExcel(){      var content = $("#report").html();      var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });      saveAs(blob, "hello world.txt");          }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表