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

Look into [data-uris](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs) that's where the solution lies. — George Mauer, Sep 08 '14 at 22:33
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: http://danml.com/download.html, and handles more devices than A[download] alone — dandavis, Sep 08 '14 at 23:11

score 18 · Answer 1 · answered Oct 19 '16 at 19:22

18

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 '16 at 19:22

spencer.sm

19,173
10
77
88

4

Make sure to use `window.URL.revokeObjectURL(url)` when you're done, to avoid a memory leak. – mfluehr Jan 30 '19 at 17:03

Константин Ван · Answer 2 · 2017-09-08T19:54:33.750

5

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 08 '17 at 19:54

answered Feb 18 '16 at 17:23

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

12,550
7
61
73

1

This should be accepted as the answer. Also the `a.click()` won't work unless you `document.appendElement` first. At least in Firefox 53. – Noitidart Mar 10 '17 at 17:14
1

@BrettZamir Oh. I didn't notice that. Thank you. – Константин Ван Sep 08 '17 at 19:55

score 1 · Answer 3 · answered Oct 11 '17 at 22:09

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);

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

3 Answers3

Linked