105

I have a string that I called Blob() on:

var mystring = "Hello World!";
var myblob = new Blob([mystring], {
    type: 'text/plain'
});
mystring = "";

How do I get the string back out? 

function getBlobData(blob) {
    // Not sure what code to put here
}
alert(getBlobData(myblob)); // should alert "Hello World!"
Joey
  • 10,504
  • 16
  • 39
  • 54

5 Answers5

90

In order to extract data from a Blob, you need a FileReader.

var reader = new FileReader();
reader.onload = function() {
    alert(reader.result);
}
reader.readAsText(blob);
Philipp
  • 67,764
  • 9
  • 118
  • 153
  • 1
    So how can I wrap that in a function and have it return the result? – Joey Apr 12 '14 at 00:18
  • @Joey see question [Call An Asynchronous Javascript Function Synchronously](http://stackoverflow.com/questions/9121902/call-an-asynchronous-javascript-function-synchronously) – Philipp Apr 12 '14 at 00:22
  • Well, I got it to wrap in a function. But for some reason it only works the second time I try to access it: http://jsfiddle.net/vMrF5/ – Joey Apr 12 '14 at 01:10
  • 1
    @Joey That's because of a race conditions. The asynchronous loading happens in the background. The first time it's not loaded yet, the second time it might already be. However, do not rely on that! That's undefined behavior which will vary from execution to execution. You have absolutely no way to tell how long loading will take. – Philipp Apr 12 '14 at 10:11
  • 1
    In case someone else wants to wrap this in a function, see my answer below. – kpg Jan 11 '19 at 09:00
42

@joey asked how to wrap @philipp's answer in a function, so here's a solution that does that in modern Javascript (thanks @Endless):

const text = await new Response(blob).text()
kpg
  • 7,644
  • 6
  • 34
  • 67
27

If the browser supports it, you could go via a blob URI and XMLHttpRequest it

function blobToString(b) {
    var u, x;
    u = URL.createObjectURL(b);
    x = new XMLHttpRequest();
    x.open('GET', u, false); // although sync, you're not fetching over internet
    x.send();
    URL.revokeObjectURL(u);
    return x.responseText;
}

Then

var b = new Blob(['hello world']);
blobToString(b); // "hello world"
Paul S.
  • 64,864
  • 9
  • 122
  • 138
  • it's a bit hacky, isn't there a less hacky way to do it? – Hugo Trentesaux Apr 15 '19 at 17:53
  • 1
    This works, but chrome 76 now warns of deprecation `[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.` – Soylent Graham Sep 25 '19 at 17:07
  • Yes it's working with error in FireFox '85.0.2 (64-bit)' `XML Parsing Error: not well-formed Location: blob:http://localhost:4200/40be6ace-691c-43a2-b208-824a0d0a933 Line Number 1, Column 1` for my 'Angular 6' app. To solve this need to add type, `const b = new Blob(['hello world'], { type: 'text/plain' });` – Pinaki Feb 15 '21 at 12:01
21

You could use the blob.text() method.

blob.text().then(text => {
  let blobText = text
})

It will return the content of the blob in UTF-8 encoding. Note that it has to be in an async.

21rw
  • 1,016
  • 1
  • 12
  • 26
8

Try:

var mystring = "Hello World!";
var myblob = new Blob([mystring], {
    type: 'text/plain'
});
mystring = "";
outurl = URL.createObjectURL(myblob);
fetch(outurl)
.then(res => res.text())
.then(data => {
    console.log(data)
})

//'Hello World'
Blaze612 YT
  • 594
  • 7
  • 13
  • 1
    Haven't tried this, but seems legit according to https://developer.mozilla.org/de/docs/Web/API/Body/blob and is more straight than the XMLHttpRequest answer of Paul S. – Andreas Apr 27 '21 at 18:04
  • Thanks. (I am very new and have not even gotten an upvote until now) – Blaze612 YT Apr 30 '21 at 14:25