I've run into this a lot when building admin dashboards: the client wants a way to "export" some data—maybe a list of filtered users or a session log—but they don't want to hit the server and wait for a generated PDF or CSV. They just want the data that's already sitting in the browser's memory to become a file on their hard drive.

Trying to force a download

My first instinct is usually: "I have a string of text, can't I just tell the browser to save it?" Let's see. If I just create an anchor tag and point it to my string, nothing happens because the browser expects a URL, not raw text.

const myData = "User ID: 123\nStatus: Active\nLast Login: 2023-10-01";
const link = document.createElement('a');
link.href = myData; // This is obviously wrong.
link.download = 'log.txt';
link.click();

Yeah, that does absolutely nothing. The href needs a valid URI. I can't just shove a 10MB string in there and hope for the best. I need the browser to treat this string as an actual file in memory.

The Blob approach

This is where Blob comes in. A Blob (Binary Large Object) is essentially a file-like object of immutable, raw data. It doesn't care if it's a string, an image, or a binary stream; it just holds the bytes.

Let's try wrapping my log string in a Blob. I'll also specify the MIME type so the OS knows it's plain text.

const myData = "User ID: 123\nStatus: Active\nLast Login: 2023-10-01";
const blob = new Blob([myData], { type: 'text/plain' });

console.log(blob.size); // It tells me the size in bytes. Handy.
console.log(blob.type); // 'text/plain'

Okay, I have a Blob. But I still can't put a Blob object directly into an href. I need a URL that points to this specific slice of memory.

Turning data into a URL

There's a handy little method called URL.createObjectURL(). It creates a temporary string (a "blob URL") that acts as a pointer to the data stored in the browser's memory.

const blob = new Blob([myData], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url); // Looks something like "blob:http://localhost:3000/some-uuid"

const link = document.createElement('a');
link.href = url;
link.download = 'session-log.txt';
document.body.appendChild(link);
link.click();

// Clean up! 
document.body.removeChild(link);
URL.revokeObjectURL(url);

I added URL.revokeObjectURL(url) at the end. If you're creating a lot of these, the browser will keep those Blobs in memory until the page is closed or you manually release them. It's a classic memory leak waiting to happen if you forget.

Wait, what's the difference with the File object?

As I was digging into the documentation, I noticed the File object. If you've worked with <input type="file">, you've already seen these. I wondered: "Is a File just a fancy Blob?"

Let's test it. I'll create a File object instead of a Blob.

const myFile = new File([myData], "session-log.txt", {
  type: "text/plain",
  lastModified: new Date().getTime()
});

console.log(myFile instanceof Blob); // true

There it is. A File is literally just a Blob that has a name and a lastModified date. In most cases, you use Blob when you're creating data on the fly, and you encounter File when the user is uploading something. Since File inherits from Blob, everything we just did with the URL object works exactly the same way for both.

📋 Practical Task

Build a JSON Configuration Exporter

Create a small application that allows a user to enter their name and a favorite color into two input fields. When a "Export Config" button is clicked, the app should:

• Gather the input values into a JavaScript object.
• Convert that object into a JSON string using JSON.stringify().
• Wrap that string in a Blob with the MIME type application/json.
• Trigger a browser download for a file named user-config.json.
• Properly revoke the object URL after the download is triggered to prevent memory leaks.