Read data from BLOB URL in Javascript

Question

I have a BLOB URL, and I want to recreate it as a second BLOB URL, so that it is downloaded by default.

var blob1 = new Blob(["Hello world!"], { type: "text/plain" });
url1 = window.URL.createObjectURL(blob1);

blob2=new Blob([url1], {type: 'application/octet-stream'});
url2 = window.URL.createObjectURL(blob2);

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url2;
a.click();
window.URL.revokeObjectURL(url);

See in JSFiddle:

https://jsfiddle.net/7spry3jn/

But this only creates a text file containint the first URL. How can I Read data from the first BLOB URL in Javascript and feed it to create the second BLOB?

@JoelRamosMichaliszen The first one doesn't force download. So I have to create a second one with such feature. — Ho1
– Ho1, Commented Feb 27, 2016 at 13:30

Joel R Michaliszen · Accepted Answer · 2019-02-02 20:18:13Z

10

You can use the download attr in anchor element, that force the download and you dont need to reate another blob.

But you need to pay attentio about browser support, see here all the browsers that accept the downloadattr: Can I Use

var blob1 = new Blob(["Hello world!"], { type: "text/plain" });
url = window.URL.createObjectURL(blob1);

var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.setAttribute("download","Any name");
a.click();
window.URL.revokeObjectURL(url);

And to read the content from a Blob you can use FileReader like this:

var myBlob = new Blob(["Hello"], {type : "text/plain"});
var myReader = new FileReader();
//handler executed once reading(blob content referenced to a variable) from blob is finished. 
myReader.addEventListener("loadend", function(e){
    document.getElementById("text").innerHTML = e.srcElement.result;//prints a string
});
//start the reading process.
myReader.readAsText(myBlob);

<p id="text"></p>

edited Feb 2, 2019 at 20:18

answered Feb 27, 2016 at 13:39

Joel R Michaliszen

4,2321 gold badge23 silver badges29 bronze badges

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

2 Comments

Ho1 Over a year ago

Thanks. Worked in Google Chrome, but not in Firefox. I don't know why. Btw, I'm doing this to download several BLOB urls. Is there a better way to to do this job?

Ho1 Over a year ago

I don't know why html5 download doens't work in Firefox for me. But, thanks. Anyway, your solution saved my day!

Collectives™ on Stack Overflow

Read data from BLOB URL in Javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related