Saving generated files on the client-side
Have you ever wanted to add a Save as…
button to a webapp? Whether you’re making an advanced WebGL-powered CAD webapp and want to save 3D object files or you just want to save plain text files in a simple Markdown text editor, saving files in the browser has always been a tricky business. Usually when you want to save a file generated with JavaScript, you have to send the data to your server and then return the data right back with a Content-disposition: attachment
header. This is less than ideal for webapps that need to work offline. The W3C File API includes a FileSaver
interface, which makes saving generated data as easy as saveAs(data, filename)
, though unfortunately it will eventually be removed from the spec. I have written a JavaScript library called FileSaver.js, which implements FileSaver
in all modern browsers. Now that it’s possible to generate any type of file you want right in the browser, document editors can have an instant save button that doesn’t rely on an online connection. When paired with the standard HTML5 canvas.toBlob()
method, FileSaver.js lets you save canvases instantly and give them filenames, which is very useful for HTML5 image editing webapps. For browsers that don’t yet support canvas.toBlob()
, Devin Samarin and I wrote canvas-toBlob.js. Saving a canvas is as simple as running the following code:
canvas.toBlob(function(blob) { saveAs(blob, filename); }); |
I have created a demo of FileSaver.js in action that demonstrates saving a canvas doodle, plain text, and rich text. Please note that saving with custom filenames is only supported in browsers that either natively support FileSaver
or browsers like Google Chrome 14 dev and Google Chrome Canary, that support <a>.download or web filesystems via LocalFileSystem
.
How to construct files for saving
First off, you want to instantiate a Blob
. The Blob
API isn’t supported in all current browsers, so I made Blob.js which implements it. The following example illustrates how to save an XHTML document with saveAs()
.
saveAs( new Blob( [(new XMLSerializer).serializeToString(document)] , {type: "application/xhtml+xml;charset=" + document.characterSet} ) , "document.xhtml" ); |
Not saving textual data? You can save multiple binary Blob
s and ArrayBuffer
s to a Blob
as well! The following is an example of setting generating some binary data and saving it.
var buffer = new ArrayBuffer(8) // allocates 8 bytes , data = new DataView(buffer) ; // You can write uint8/16/32s and float32/64s to dataviews data.setUint8 (0, 0x01); data.setUint16(1, 0x2345); data.setUint32(3, 0x6789ABCD); data.setUint8 (7, 0xEF); saveAs(new Blob([buffer], {type: "example/binary"}), "data.dat"); // The contents of data.dat are <01 23 45 67 89 AB CD EF> |
If you’re generating large files, you can implement an abort button that aborts the FileSaver
.
var filesaver = saveAs(blob, "video.webm"); abort_button.addEventListener("click", function() { filesaver.abort(); }, false); |
Wow, this is all very useful. Thanks!
Love this! Just an FYI though, Chrome 13 no longer needs –unlimited-quota-for-files flags for the filesystem API to work. Also, –allow-file-access-from-files should only be used for testing as it allows access to file:// and is a security risk.
Thanks, I updated the post.
Whoa! Creepy fast sir. Creepy fast.
can you please put mc back up I bought full verison but it wont work on my computer so I play this but now u shut down? please please please put back if u do i will luv u and I will share this around everywhere. So please put it back up and if u cant please reply why and how I can update videocard drivers thanks
wow u reply to eric… and no else. can u plz put it back up or tell us why it doesnt work
Put minecraft back now! D=<
You may already know this, but a.download (developers.whatwg.org/links.html#downloading-resources) is now in Chrome Dev channel. It might be the better fallback to saving a named file than the FileSystem API. Although for the moment, both of these are only in Chrome
Wow, I didn’t know that! I’m going to look into adding that into FileSaver.js this instant. Also, I just experimented with it a bit and it looks like Chrome doesn’t follow the download property precisely when there isn’t a filename extension but a known media type is used (e.g. it saves foo.txt if the type is text/plain and the filename is only “foo”). I’d prefer if developers had more control over this. Other than that, this is perfect when combined with object URLs!
execuseme why isnt minecraft working
Please read my first comment and If u do put mc back up i will like eveything u have up so please read my comment and put mc back up;
Hey,
I dont know if you know this, but about a BILLION people play minecraft. I dont know how ur related to minecraft, but if you put it back up i might donate. PLEASE. PUT. MINECRAFT. BACK. UP!
thanks
you fucking suck my shit!
you suck
Can you please put Minecraft back? I cannot buy the game because of virud issues.
Hi! Thanks a lot for both BlobBuilder and FileSaver! I’ve used them for my Google Chrome extension:
www.visual-experiments.com/2012/01/15/photosynth-webgl-viewer-with-html5-fileaver/
There is an error in Safari 5.1 for Mac:BlobBuilder.js:101
RangeError: Maximum call stack size exceeded.
Pingback: Fájl mentés kliens oldalon | Farkas Máté()
Just wanted to say thanks! I’ve searched high and low all over the place for a *good* way to save images created by the user in a JS app. Everyone seems to simply rely on toDataUrl() which for a large canvas was unusably slow (tens of seconds to open the URL in a new window). Your method is fast and cross browser friendly.
I’m am so p.o. Can you just leave try minecraft free alone. Ever since you exist I can’t play minecraft everything I had injoy is gone.thanks to you
I have fast Internet but before I was able to play on this website called try minecraft for free but then every time I try to go on that website it said page not found. Can you please help. I don’t want to save files or anything I just want to go on that website and play minecraft. I work so hard on finding that website. Agian please help.
Why isnt minecraft for free working?
Why did you get wriht of try minecraft free and Minecraft for free
Man Minecraft was my favourite game of the world that’s all I capt playing every day
Put minecraft back on please
why did you put minecraft away leave it alone you fgot
if u aint gonnaa update it leave it alone
why isnt it workini just want to play
What the heck is this thing? Where is the minecraft for free??? If you are just going to just anyhow shut down that god damn website, i wont even play on this website
i wana play minecraft!!!
Why im i not able to play minecraft any more it just takes me to this freakin blog!!!!!!!!!!!!!
I……..WANNA play minecraft….give me minecraft back
Please respond?
As you can see, many,many people are complaining about the minecraft for free isn’t doing anything and going straight to here. As for me, I am quite upset as well. Do you think you could fix this problem? Thanks.
i want to play mine craft BITCH
What the hell happened to try minecraft free this is bull!
All my work 5 months……
i know tell them to make it work again
can you guys make minecraft work again please because i cant get the full version and this site is my only chance to play it
i go with you rodney
okay seriously what the hell kinda sick joke is this? PUT EFFING TRY MINECRAFT FREE BACK ON YOU @$$HOLES!
WAIT i think their doin this to fix stuff like errors and that
thia dang website is probly going down like minecraft for free so dont any of you get your hopes up on playing minecraft here agian.
wtf
bull crap y is it gone
I hade fun on minecraft, work!My life is now horrable.
Please put it back i was working on making things on my new 2 servers, and i was just beggining to play minecraft first time!!!
I am from cz i never try before can you guys make minecraft work again pleas because is only the best game ever.so make work please thanks thanks ok pleas by.
ya pls make minecraft work pls
can you guys make minecraft work because it is blocked and i do not no how to unblock it please can you and i love that game thankyou
get minecraft working again
Luckly i can still play it on here. HERES HOW GO TO GOOGLE AND SEARCH UP MINECRAFT FOR FREE FIND THIS SITE DONT CLICK IT MOVE YOUR MOUSE OVER IT AND LOOK TO THE LEFT IT SHOULD HAVE ARROWS LIKE THIS >>. CLICK ON THAT ARROW AND CLICK CACHE AND YOU SHOULD BE ON IT
If my other comment doesnt work copy and paste this link: webcache.googleusercontent.com/search?q=cache:i0sVohvAzfYJ:eligrey.com/minecraft/play.html+&cd=1&hl=en&ct=clnk&gl=us&client=firefox-a
Make sure that your running on firefox while using this URL
PLZ MAKE MINECRAFT WORK AGAIN! PLZ!
NOOOOOOOO!!! Minecraft is lost forever
i want to play minecraft
please put minecraft back on it was the only thing that i go on my laptop for:(