Create and save a file with JavaScript

Create and Save Files in the Browser with JavaScript

Learn how to programmatically create files and trigger downloads in web applications using pure JavaScript, enhancing user interaction for data export and content generation.

In many web applications, the ability to generate and save files directly from the browser is a crucial feature. Whether it's exporting user data, generating reports, or simply allowing users to download dynamically created content, JavaScript provides powerful tools to achieve this without server-side intervention. This article will guide you through the process of creating various file types and initiating downloads using modern browser APIs.

Understanding File Creation in the Browser

At its core, saving a file in the browser involves two main steps: first, creating the file content, and second, triggering a download. JavaScript doesn't allow direct access to the user's file system for security reasons. Instead, we leverage Blob objects to represent file-like immutable raw data and then use the URL.createObjectURL() method to create a DOMString containing a URL representing the Blob. This URL can then be assigned to an anchor <a> tag's href attribute, combined with the download attribute, to initiate a client-side download.

File creation and download workflow in JavaScript

Creating and Saving Text Files (TXT, CSV, JSON)

The simplest form of file to create is a plain text file. This method is highly versatile and can be adapted for CSV, JSON, or any other text-based format by simply adjusting the content and MIME type. We'll use a Blob to encapsulate our text data and then create a temporary URL for it.

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

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a); // Required for Firefox
  a.click();

  document.body.removeChild(a); // Clean up
  URL.revokeObjectURL(url);
}

// Example usage:
saveTextFile('mydata.txt', 'Hello, this is some text content.');
saveTextFile('report.csv', 'Name,Age\nAlice,30\nBob,24');
saveTextFile('config.json', JSON.stringify({ setting: 'value', id: 123 }, null, 2));

JavaScript function to save general text-based files.

Saving Binary Files (Images, PDFs)

Saving binary files like images or PDFs follows a similar pattern, but the content source is typically different. Instead of raw strings, you'll often work with ArrayBuffers, Uint8Arrays, or base64 encoded strings that need to be converted back to binary data. For demonstration, we'll consider a scenario where you have a base64 encoded image string or an ArrayBuffer from an API response.

Tab 1

Create a simple image element in your HTML, for example: <img id="myImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="> (a 1x1 transparent PNG).

Tab 2

Add a button to trigger the save action: <button onclick="saveImageFromDataURL()">Save Image</button>.

function dataURLtoBlob(dataurl) {
    const arr = dataurl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

function saveImageFromDataURL() {
  const imgElement = document.getElementById('myImage');
  if (!imgElement) {
    console.error('Image element not found');
    return;
  }
  const dataURL = imgElement.src;
  const filename = 'my_downloaded_image.png'; // Or dynamically determine extension

  const blob = dataURLtoBlob(dataURL);
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();

  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Example usage (triggered by button click):
// <button onclick="saveImageFromDataURL()">Save Image</button>

Saving an image file from a base64 Data URL.

Advanced Scenarios: Multiple Files and File Types

While the above methods handle single files, you might encounter scenarios where you need to allow users to download multiple files. This can be achieved by either zipping them on the client-side (using libraries like JSZip) or by triggering multiple individual downloads sequentially or in parallel. Another common requirement is to handle various MIME types dynamically. By correctly setting the type property of the Blob constructor, you can ensure the browser handles the file appropriately.

Tab 1

For a .txt file: new Blob([content], { type: 'text/plain' })

Tab 2

For a .csv file: new Blob([content], { type: 'text/csv' })

Tab 3

For a .json file: new Blob([JSON.stringify(data)], { type: 'application/json' })

Tab 4

For a .png image: new Blob([arrayBuffer], { type: 'image/png' })

Tab 5

For a .pdf document: new Blob([arrayBuffer], { type: 'application/pdf' })

The key is to match the Blob type to the file's actual MIME type so that the browser can correctly identify and process the downloaded file. If the MIME type is omitted or incorrect, the browser might default to application/octet-stream, which often prompts the user to choose an application to open the file.