What is Blob in JavaScript

JavaScript Blob is a built-in object representing a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.

The browser has additional high-level objects. Among them is the Blob. The Blob object visualizes a blob that is a file-like object immutable. The Blob is raw data: you can read it as binary data or text. It consists of an optional string type, blobParts, strings, and BufferSource.

Blob Constructor

The Blob Constructor allows one to create blobs from other objects. For example, to construct a blob from a string.

We can construct Blob from other non-blob objects and data using the Blob() constructor.

Create an index.html file and add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 <script>
  let student = {name: 'Krunal'}
  let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
  console.log(blob); 
  </script>
</body>
</html>

Go to the browser and run this file, and you will see the following output in the browser console.

Javascript Blob Object Tutorial With Example

Blob size property

The Blob.size property returns the size in bytes of the Blob or a File.

Syntax

var sizeInBytes = blob.sizeSee the below output.

Example

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <script>
 let student = {name: 'Krunal'}
 let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
 console.log(blob.size); 
 </script>
</body>
</html>

Output

Blob size method

Blob.slice() method

The Blob.slice() function is used to create the new Blob object containing data in the specified range of bytes of the source Blob.

Syntax

instanceOfBlob.slice([start [, end [, contentType]]]);

See the following code.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <script>
 let student = {name: 'Krunal'}
 let blob = new Blob([JSON.stringify(student, null, 2)], { type: 'application/json' });
 console.log(blob.slice(10, 16, { type: 'application/json' })); 
 </script>
</body>
</html>

Output

Blob.slice() method

That’s it.

1 thought on “What is Blob in JavaScript”

  1. I need to define a file template using JS and JQuery and pass it to blob for download. Do you have any idea how to do this ?

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.