How to Download Files from Base64 Data in JavaScript

When dealing with file data on the web, it’s common to encounter situations where the file is encoded in Base64 format. Whether you’re working with data directly from a database or receiving it via an API, converting and downloading these files can be essential. In this post, we will explore how to download files from Base64 data using JavaScript.

Understanding the Base64 Encoding

Base64 encoding is a way of converting binary data into a string format that can be easily transmitted across text-based systems, such as HTML or JSON. It is particularly useful when embedding image files or documents directly in web pages. In this example, we’ll focus on downloading a simple text file.

Steps to Download Base64 Files

1. Convert Base64 to Binary Data:
   First, we need to decode the Base64 string into binary format. The atob() function allows us to convert Base64-encoded text back to a string of binary characters. After this, we create a Uint8Array to hold the byte data.
2. Create a Blob:
   Once we have the binary data, we can create a Blob object. A Blob is a file-like object representing raw data, and in this case, we define it as a text/plain type to specify the file format.
3. Trigger the File Download:
   By creating an anchor (<a>) element and setting its href attribute to a URL representing the Blob data, we can trigger the browser to download the file. The download attribute of the link specifies the filename.

Example Code:

function downloadBase64File(base64Data, fileName, mimeType) {
    // Step 1: Convert Base64 string to binary data
    const byteCharacters = atob(base64Data);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);

    // Step 2: Create a Blob object from the binary data
    const blob = new Blob([byteArray], { type: mimeType });

    // Step 3: Create a temporary link to trigger file download
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob); // Create a URL for the Blob object
    link.download = fileName; // Specify the file name for download
    document.body.appendChild(link); // Append the link to the DOM
    link.click(); // Trigger the download
    document.body.removeChild(link); // Remove the link after download
}

Example Usage in Console

To test this function in the browser’s console, you can run the following:

// Base64 string for "Hello World"
const base64Data = "SGVsbG8gV29ybGQ=";

// File name for the download
const fileName = "example.txt";

// MIME type for the file
const mimeType = "text/plain";

// Call the function to download the file
downloadBase64File(base64Data, fileName, mimeType);

Explanation of the Code

• Base64 Data: The string SGVsbG8gV29ybGQ= represents the text “Hello World” in Base64 encoding. This can be replaced with any Base64-encoded data you wish to convert into a downloadable file.
• Blob Creation: The Blob object is created with the Uint8Array that holds the binary data. We specify the MIME type as text/plain to indicate that it’s a text file.
• File Download Trigger: The <a> element is dynamically created, and its href is set to a URL representing the Blob object. By clicking the link programmatically, the browser initiates the file download.

Why Use Base64 Encoding?

Base64 encoding is extremely useful in web applications where you need to send or store files as strings. This can include images, documents, or any other file type. By encoding the file as Base64, you can transmit the data more easily through HTTP requests or even store it in a database.

For instance, a web application that generates a report on the fly might encode the report in Base64 and allow the user to download it directly without the need for a server-side file generation process.