Limit one: Different browsers have different restrictions on BLOB objects
Take a look at the table below (from Filesaver.js):
Browser |
constructs | as
Filenames |
Max Blob Size |
Dependencies |
Firefox 20+ |
Blob |
Yes |
MiB |
None |
Firefox < 20 |
Data:uri |
No |
N/A |
Blob.js |
Chrome |
Blob |
Yes |
MiB |
None |
Chrome for Android |
Blob |
Yes |
MiB |
None |
Edge |
Blob |
Yes |
? |
None |
IE + + |
Blob |
Yes |
MiB |
None |
Opera 15+ |
Blob |
Yes |
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 |
Limit two: The Blob object is not converted to a file until it is built
This limitation may have little effect on small files (dozens of KB), but it can have a large impact on slightly larger files. Imagine, the user to download a 100mb file, if he clicked on the download button did not see the download prompt, he will certainly continue to press, and so he pressed a few times after he did not see the download prompt, he will complain about our site, and then left.
However, the fact that the download really happened, just wait until after downloading the file to build the Blob object, and then converted to a file. Also, users triggering more than a few more downloads can create some resource waste.
Therefore, if you want to download large files, it is recommended to create a <a>
tag directly pull ~
Write HTML or write JavaScript dynamic creation, in the way you like to create it.
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*/varSaveAs = SaveAs | | (function(view) {"Use Strict"; //IE <10 is explicitly unsupported if(typeofView = = = "Undefined" | |typeofNavigator!== "undefined" &&/msie [1-9]\./. Test (navigator.useragent)) { return; } varDoc=view.document//Only get URLs when necessary in case blob.js hasn ' t overridden it yet, Get_url =function() { returnView. URL | | View.webkiturl | |view; }, Save_link= Doc.createelementns ("http://www.w3.org/1999/xhtml", "a"), Can_use_save_link= "Download"inchSave_link, click=function(node) {varevent =NewMouseEvent ("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() { Throwex; }, 0); }, Force_saveable_type= "Application/octet-stream"//The Blob API is fundamentally broken as there are no "downloadfinished" event to subscribe to, arbitrary_revoke_timeout = 1000 * 40//In Ms, revoke =function(file) {varRevoker =function() { if(typeofFile = = = "string") {//file is an object URLGet_url (). Revokeobjecturl (file); } Else{//file is a fileFile.remove (); } }; SetTimeout (Revoker, arbitrary_revoke_timeout); }, Dispatch=function(Filesaver, Event_types, event) {Event_types=[].concat (Event_types); vari =event_types.length; while(i--) { varListener = filesaver["on" +Event_types[i]]; if(typeofListener = = = "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 would 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 NewBlob ([String.fromCharCode (0xFEFF), Blob], {type:blob.type}); } returnblob; }, 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 varFilesaver= 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 varReader =NewFileReader (); Reader.onloadend=function() { varurl = is_chrome_ios? Reader.result:reader.result.replace (/^data:[^;] *;/, ' data:attachment/file; '); varPopup = View.open (URL, ' _blank '); if(!popup) View.location.href =URL; URL=undefined;//release reference before dispatchingFilesaver.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 { varOpened = 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.htmlView.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 NewFilesaver (BLOB, name | | blob.name | | "Download", No_auto_bom); } ; //IE + + (native saveAs) if(typeofNavigator!== "undefined" &&Navigator.mssaveoropenblob) {return function(BLOB, name, No_auto_bom) {name= Name | | Blob.name | | "Download"; if(!No_auto_bom) {blob=Auto_bom (BLOB); } returnNavigator.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; returnSaveAs;} ( typeofSelf!== "undefined" && Self||typeofWindow!== "undefined" &&window|| This. Content));//' self ' was undefined in Firefox for Android content script context//While "This" is Nsicontentframemessagemanager//With a attribute ' content ' that corresponds to the windowif(typeofModule!== "undefined" &&module.exports) {module.exports.saveAs=SaveAs;} Else if((typeofDefine!== "undefined" && define!==NULL) && (DEFINE.AMD!==NULL) {define ("Filesaver.js",function() { returnSaveAs; });}
Calling methods
function Exptoexcel () { var content = $ ("#report"). html (); var New Blob (["Hello, world!"], {type: "Text/plain;charset=utf-8" }); Hello world.txt "); }
Filesaver.js browser to export Excel files