CODEWITHSUNDEEP
javascriptblobconsole.log
jkjustjoshing
jkjustjoshing

Reputation: 3630

How can I console.log() a Blob object?

I have a Blob object I want to inspect by logging its value. All I can see are type and size properties. Is there a way to do this?

console.logging a blob shows this

Upvotes: 15

Views: 22470

Answers (3)

jkjustjoshing
jkjustjoshing

Reputation: 3630

Updated for 2023, this can now be done with

await blob.text()

(Thanks @Kaiido)

Upvotes: 1

AmerllicA
AmerllicA

Reputation: 32472

First of all we should create a function for converting blob to base64:

const blobToBase64 = blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

Then we can use this function to use it for console.log:

blobToBase64(blobData).then(res => {
  console.log(res); // res is base64 now
  // even you can click on it to see it in a new tab
});

Upvotes: -2

epascarello
epascarello

Reputation: 207501

Basic example on using a FileReader to look at the content in a blob

var html= ['<a id="anchor">Hello World</a>'];
var myBlob = new Blob(html, { type: 'text/xml'});
var myReader = new FileReader();
myReader.onload = function(event){
    console.log(JSON.stringify(myReader.result));
};
myReader.readAsText(myBlob);

Upvotes: 20

Related Questions