Download File From Blob Url Javascript

4 min read Jun 19, 2024

Download File from Blob URL in JavaScript

This article will guide you on how to download files from a Blob URL in JavaScript.

Understanding Blob URLs

A Blob URL is a special type of URL that points to a file-like object in the browser's memory, known as a Blob. Blobs are used to represent binary data, such as images, audio, videos, or any other file type.

Blob URLs provide a way to download or display data that is not stored on a server. They are typically generated on the fly, using JavaScript code, and then used in the <a> tag's href attribute for downloading.

Downloading a File from Blob URL

Here's how to download a file from a Blob URL in JavaScript:

Create a Blob object:
```
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
```
This creates a Blob object containing the string "Hello, World!" with a plain text MIME type.
Generate a Blob URL:
```
const blobUrl = URL.createObjectURL(blob);
```
This generates a temporary Blob URL that points to the Blob object.
Create an anchor element (<a>):
```
const downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = 'hello.txt'; // Set the filename
```
This creates an anchor element with the Blob URL as the href attribute and sets the download attribute to "hello.txt".
Trigger the download:
```
downloadLink.click();
```
This programmatically clicks the anchor element, triggering the download of the file.
Cleanup:
```
URL.revokeObjectURL(blobUrl);
```
This cleans up the Blob URL, releasing the memory used by the Blob object.

Example: Downloading a Text File

This example demonstrates how to download a text file from a Blob URL:

function downloadTextFile() {
  const text = "This is a sample text file.";
  const blob = new Blob([text], { type: 'text/plain' });
  const blobUrl = URL.createObjectURL(blob);

  const downloadLink = document.createElement('a');
  downloadLink.href = blobUrl;
  downloadLink.download = 'sample.txt';

  downloadLink.click();

  URL.revokeObjectURL(blobUrl);
}

Downloading Data from a Fetch Response

You can also download data from a fetched response using Blob URLs:

async function downloadFileFromFetch() {
  try {
    const response = await fetch('https://example.com/file.pdf');
    const blob = await response.blob();

    const blobUrl = URL.createObjectURL(blob);

    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = 'file.pdf';

    downloadLink.click();

    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('Error downloading file:', error);
  }
}

This code fetches a file from a remote server, converts the response to a Blob object, generates a Blob URL, and then triggers the download.

Conclusion

This article demonstrated how to download files from Blob URLs in JavaScript. By creating a Blob object, generating a Blob URL, and programmatically triggering a download, you can efficiently manage file downloads within your web application.