I am trying to download a file using data uri in following manner:
The problem is that the downloaded file is always named 'Unknown', whatever I try to use as filename. Is this the correct way to give the file a name ? or something else needs to bedone ?
5 Answers
Here's the solution, you just have to add a download
attribute to anchor taga
with desired name
Another solution is to use JQuery/Javascript
On Safari, you might want to use this, and instruct the user to ⌘-S the file:
Otherwise, this uses Filesaver.js, but works ok:
Note: There is some AngularJS in the code above, but it should be easy to factor out..
For those that are using other libraries like angularjs or backbone, you can try something like this.
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);
I had the same issue and finally I solved in all browsers serving the CSV file in the server-side:
For anybody looking for a client-side solution using Javascript only, here is mine, working on any brother except IE 10 and lower (and Edge .. why ?!) :
![Application octet stream files Application octet stream files](https://forum.unity.com/proxy.php?image=http%3A%2F%2Fi.imgur.com%2FLbEzODR.gif&hash=80b300a7a1effac965737c1d1391488a)
Application/octet-stream Google
Not the answer you're looking for? Browse other questions tagged htmldata-uri or ask your own question.
![Application Octet Stream Javascript Application Octet Stream Javascript](https://raw.githubusercontent.com/wkh237/react-native-fetch-blob/HEAD/img/performance_f2f.png)
- location.href = 'data:application/octet-stream;base64,' + appendPDFContentHere
- <a href='data:application/octet-stream;base64,appendPDFContentHere'>pdf</a>
- /**
- * Base64 encode / decode
- *
- _keyStr : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
- // public method for encoding
- var output = ';
- var chr1, chr2, chr2raw, chr3, chr3raw, enc1, enc2, enc3, enc4;
- chr2 = isNaN(chr2raw = input.charCodeAt(i++)) ? NaN : (chr2raw & 0xFF);
- chr3 = isNaN(chr3raw = input.charCodeAt(i++)) ? NaN : (chr3raw & 0xFF);
- enc1 = chr1 >> 2;
- enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
- enc3 = enc4 = 64;
- enc4 = 64;
- this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
- this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
- }
- return output;
- }
- // http://web.archive.org/web/20071103070418/mgran.blogspot.com/2006/08/downloading-binary-streams-with.html
- //fetches BINARY FILES synchronously using XMLHttpRequest
- load_url = function(url) {
- req.open('GET',url,false);
- //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
- req.overrideMimeType('text/plain; charset=x-user-defined');
- alert(req.status);
- }
- }
- function getDataURI(filename)
- var file = load_url(filename);
- var uri = 'data:application/octet-stream;base64,' + encodeURIComponent(uueFile);
- }
- window.addEventListener('load',
- {
- document.getElementById('myDiv').innerHTML += '<a href=' + link + '><code>' + link + '</code></a><br><br>';
Because I was bored I wrote a HTML5 player for Magnatune: Magnatune PlayerGreattune Player [repo]. Besides learning jQuery, HTML5 audio and HTML Drag and Drop I also developed a method to save playlists to files.
Everything except the search is implemented in JavaScript, so the server never knows the playlist. Because I didn't want to send the playlist to the server just so the user can download it I investigated what methods there are to save data generated in JavaScript. I came up with the solution presented here. It does not use Flash or a echo server and is therefore supported in every recent browser except Internet Explorer before the version 10.
Feature test: Does this browser support the download attribute on anchor tags? (currently only Chrome)
Use any available BlobBuilder/URL implementation:
IE 10 has a handy navigator.msSaveBlob method. Maybe other browsers will emulate that interface?See MSDN about it.
Anyway, HMTL5 defines a very similar but more powerful window.saveAs function:
However, this is not supported by any browser yet. But there is a compatibility library calledFileSaver.js(github) that adds this function to browsersthat support Blobs (except Internet Exlorer).
Mime types that (potentially) don't trigger a download when opened in a browser:
Blobs and saveAs (or saveBlob)
Currently only IE 10 supports this, but I hope other browsers will also implement the saveAs/saveBlob method eventually.
I don't assign saveAs to navigator.saveBlob (or the other way around) because I cannot know at this point whether future implementationsrequire these methods to be called with 'this' assigned to window (or naviagator) in order to work. E.g. console.log won't work when not calledwith this console.
Blobs and object URLs
Currently WebKit and Gecko support BlobBuilder and object URLs.
Results 1 - 48 of 132 - Shop from the world's largest selection and best deals for PC Overwatch. Shop with confidence on eBay! Overwatch: Game of the Year Edition Battle.net Key GLOBAL. Please note: Overwatch Origins Edition (PC) is a digital product - no box delivery. Overwatch for pc cheap. He asked me where he can find the cheapest version ( he doesn't. Buy Overwatch on PS4, XboxOne, PC in retail box or cd key. Download it on Sony PSN, Xbox. Overwatch cheapest price. Official website: Overwatch; PEGI:. Cheap Overwatch Battlenet CD Key on PC. Save -46% Now over 36 Stores Compared! (MMOGA, Online, HRKGame.).
Currently only Chrome (since 14-dot-something) supports the download attribute for anchor elements.
Now I need to simulate a click on the link. IE 10 has the better msSaveBlob method and older IE versions do not support the BlobBuilder interface and object URLs, so we don't need the MS way to build an event object here.
Application/octet-stream Virus
In other browsers I open a new window with the object URL.In order to trigger a download I have to use the generic binary data mime type 'application/octet-stream' for mime types that browsers would display otherwise.Of course the browser won't show a nice file name here.
The timeout is probably not necessary, but just in case that some browser handle the click/window.open asynchronously I don't revoke the object URL immediately.
Using the filesystem API you could do something very similar.However, I think this is only supported by Chrome right now and it is much more complicated than this solution. And chrome supports the download attribute anyway.
data:-URLs
IE does not support URLs longer than 2048 characters (actually bytes), so it is useless for data:-URLs.Also it seems not to support window.open in combination with data:-URLs at all.
Note that encodeURIComponent produces UTF-8 encoded text. The mime type should contain the charset=UTF-8 parameter.In case you don't want the data to be encoded as UTF-8 you could use escape(data) instead.
Internet Explorer before version 10 does not support any of the methods above.If it is text data you could show it in an textarea and tell the user to copy it into a text file.
A small example using the sowSave function:
See how it looks like.
Update:The BlobBuilder interface is now deprecated. Instead the Blob interface is new constructible. So in very recent browsers one can write:
But for compatibility with older versions of Firefox, Chrome/WebKit and Opera one has to support the BlobBuilder interface anyway. See the HTML5 File API.