Blob

In this article

The Blob constructor allows you to easily create and manipulate a blob (typically equivalent to a file) directly on the client.
You can construct a blob directly as seen in the code snippet below:

var blob = new Blob(["1234"], {type: 'text/plain'})

The Blob constructor can also take an ArrayBufferView directly rather than constructing a blob with ArrayBuffer

Examples

The following examples show blobs in action.

Saving a file

You can locally save files (of arbitrary size) using the Blob constructor along with the window.navigator.msSaveBlob and window.navigator.msSaveOrOpenBlob methods.
Microsoft Edge's msSaveBlob and msSaveOrOpenBlob methods allow a user to save the file on the client as if the file had been downloaded from the Internet (which is why such files are saved to the Downloads folder).

In Microsoft Edge, both methods have the same behavior, starting the download automatically with options upon completion to either open the file, open the folder, or view the downloads folder.

To help understand how the Blob constructor and msSaveBlob/msSaveOrOpenBlob can be used to save an altered file on the client, consider the following example:

Loading saved files

After a file has been saved to the client, the next step is to retrieve data from the saved file. The following example allows you to create a simple canvas-based drawing, save it to a local file, and load such a saved drawing.

Here we use canvas.msToBlob() instead of canvas.toDataURL(). If we were to use canvas.toDataURL(), we'd preclude the possibility of easily using another application to view a saved drawing. Saving the drawing as a PNG file has the benefit of allowing a number of standard applications, including the browser, to display the drawing. By using canvas.msToBlob(), we can save the file directly to PNG format as highlighted in this excerpt: