本文介绍了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 */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:///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"); }

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