Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Read data from BLOB URL in Javascript

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?

like image 824
Ho1 Avatar asked Jan 06 '23 13:01

Ho1


1 Answers

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>
like image 193
Joel R Michaliszen Avatar answered Jan 12 '23 00:01

Joel R Michaliszen