12

HTML5 introduces the FileWriter class. With this class you can make Blobs. (A File is an extension of a Blob.) With JavaScript you can make a Blob and for instance show it using the dataURL.

Example:

var bb = new BlobBuilder();
bb.append('some text')
var blob = bb.getBlob('text/plain');

var fr = new FileReader();
fr.onload = function(e) {
 document.location = this.result; // voila the dataURL
}
fr.readAsDataURL(blob);

But that's not good enough :) I want the newly created (text) file to be downloaded. Not opened in the same or a separate window.

Is there a way? There must be. How?

(The discussion already exists in the Google Chrome group)

UPDATE
The File API has changed, because the specs have changed (or something!?). Webkit broke backward compatibility with BlobBuilder, now called WebKitBlobBuilder. Same example differently on jsFiddle

UPDATE
Creating Blobs now works differently again (no more append()):

blob = new Blob(['some text'], {type: 'text/plain'});
Rudie
  • 52,220
  • 42
  • 131
  • 173

2 Answers2

13

The download tag in combination with the Blob object does the trick (at least in the latest chrome versions). See this fiddle:

var blob = new Blob(['blaaaaat'], {type: 'text/plain'});
$('a').attr("href", window.URL.createObjectURL(blob));
$('a').attr("download", "woeii.txt");

F̶i̶r̶e̶f̶o̶x̶ ̶d̶o̶e̶s̶n̶'̶t̶ ̶s̶u̶p̶p̶o̶r̶t̶ ̶t̶h̶e̶ ̶d̶o̶w̶n̶l̶o̶a̶d̶ ̶a̶t̶t̶r̶i̶b̶u̶t̶e̶ though (it does support the Blob object). Discussions about implementation of the download attribute in Firefox are available here:

Edit: The download attribute is now supported by the latest firefox versions as of 10/3/2013

Community
  • 1
  • 1
Laurens Rietveld
  • 958
  • 1
  • 11
  • 21
  • wrong fiddle link, I meant this one: http://jsfiddle.net/NSCJH/ – Laurens Rietveld Feb 27 '13 at 16:26
  • That's the one I've been using. (I don't use Firefox.) I didn't know Firefox didn't support that yet. – Rudie Feb 27 '13 at 19:33
  • 2
    Nice! I had no idea about the download attribute. – brianpeiris Feb 27 '13 at 21:16
  • Is there a way to trigger the download without waiting for the user to click the link? I have a button the user clicks that produces the data, which I want to then download immediately. Just doing $('a').click() in your fiddle didn't seem to work. – Ben Dilts Apr 22 '15 at 23:10
  • @BenDilts, just came across this answer which may work for you: https://stackoverflow.com/a/28647235/897968 – FriendFX Feb 23 '16 at 23:02
1

Here is a pure Javascript solution for creating a text blob and download as text file

var fileContent = 'This is sample text file';
var fileName = 'sampleFile.txt';

const blob = new Blob([fileContent], { type: 'text/plain' });
const a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', window.URL.createObjectURL(blob));
a.click(); // EXECUTING CLICK EVENT WILL AUTO-DOWNLOAD THE FILE
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • The `download` attribute doesn't take a filename anymore. It used to, long ago, but now it's just a boolean attribute. [See MDN.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) -- edit: or maybe it does..? I've never seen it work. Does it? – Rudie Jun 19 '19 at 23:55
  • Yes it does. From the page you linked: "If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want)." – Brian K. Sep 12 '19 at 21:10