Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

Question

I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??

HTML:

<input type="button" onclick="newBlob()" value="Clear and Export">

Javascript:

function newBlob() {
    var blobData = document.getElementById("ticketlog").value;
    var myBlob = new Blob(blobData, "plain/text");
    blobURL = URL.createObjectURL(myBlob);
    var href = document.createElement("a");
    href.href = blobURL;
    href.download = myBlob;
    href.id = "download"
    document.getElementById("download").click();
}

I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p

you need to call click on href, not download. and href needs to be appended to the document somehow. alternately, my download.js script accepts blobs, strings, or dataURLs: danml.com/download.html, and handles more devices than A[download] alone — dandavis
– dandavis, Commented Sep 8, 2014 at 23:11

spencer.sm · Accepted Answer · 2016-10-19 19:22:18Z

23

The simplest way I've come up with is as follows:

function download(text, filename){
  var blob = new Blob([text], {type: "text/plain"});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
}

download("this is the file", "text.txt");

List of possible blob filestypes: http://www.freeformatter.com/mime-types-list.html

answered Oct 19, 2016 at 19:22

spencer.sm

20.8k10 gold badges86 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mfluehr Over a year ago

Make sure to use window.URL.revokeObjectURL(url) when you're done, to avoid a memory leak.

Константин Ван · Accepted Answer · 2017-09-08 19:54:33Z

6

const downloadBlobAsFile = (function closure_shell() {
    const a = document.createElement("a");
    return function downloadBlobAsFile(blob, filename) {
        const object_URL = URL.createObjectURL(blob);
        a.href = object_URL;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(object_URL);
    };
})();


document.getElementById("theButton").addEventListener("click", _ => {
    downloadBlobAsFile(new Blob(
        [document.getElementById("ticketlog").value],
        {type: "text/plain"}
    ), "result.txt");
});

The value of a download property of an <a> element is the name of the file to download, and the constructor of Blob is Blob(array, options).

edited Sep 8, 2017 at 19:54

answered Feb 18, 2016 at 17:23

Константин Ван

15.3k8 gold badges80 silver badges90 bronze badges

2 Comments

Noitidart Over a year ago

This should be accepted as the answer. Also the a.click() won't work unless you document.appendElement first. At least in Firefox 53.

Константин Ван Over a year ago

@BrettZamir Oh. I didn't notice that. Thank you.

Gustavo Ulises Arias Méndez · Accepted Answer · 2017-10-11 22:09:46Z

1

I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file

var text = 'hello blob';
var blob = new Blob([text], { type: 'text/plain' });
let textFile = window.URL.createObjectURL(blob);
let window2 = window.open(textFile, 'log.' + new Date() + '.txt');
window2.onload = e => window.URL.revokeObjectURL(textFile);

answered Oct 11, 2017 at 22:09

Gustavo Ulises Arias Méndez

4132 silver badges13 bronze badges

Collectives™ on Stack Overflow

Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related