开发者

Force download for blob created with FileWriter in JavaScript [duplicate]

This question already has answers here: How to create a file in memory for user to download, but not through server? (22 answers) Closed 3 years ago.

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 exa开发者_如何学Cmple differently on jsFiddle

UPDATE

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

blob = new Blob(['some text'], {type: 'text/plain'});


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


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
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜