AppDividend
Latest Code Tutorials

Javascript Blob Object Tutorial With Example | Blob Object Explained

1

Javascript Blob Object Tutorial With Example | Blob Object Explained is today’s topic. The Blob object represents 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.

Javascript Blob Object Tutorial

Blobs are immutable objects that represent raw data. The file is a derivation of Blob that represents data from the file system. Use FileReader to read data from a Blob or File. Blobs allow you to construct file-like objects on the client that you can pass to apis that expect urls instead of requiring the server provides the file.

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

Blob Constructor

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

For this example, we will not use the node.js because node.js does not have blob datatype. You can refer to this StackOverflow link.

Now, 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>

Now, 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.size

See the following example.

<!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.size);  
  </script>
</body>
</html>

See the below output.

Blob size method

 

Blob.slice() method

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

See the following 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>

See the output.

Blob.slice() method

 

Conclusively, Javascript Blob Object Tutorial With Example | Blob Object Explained article is over.

1 Comment
  1. Lalinda Dias says

    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 ?

Leave A Reply

Your email address will not be published.

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