How can I use JavaScript to download a file from a data URL across all browsers?

General Discussions
, ,
1

I’m building a fun browser-based zip/unzip tool using pure JavaScript. Users can drag files into the browser to unzip, or drag in individual files to create a new zip—no server needed.

The drag-and-drop and zip encoding/decoding parts seem manageable, but I’m running into trouble with downloading files.

I’m trying something like:

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....';

This works in Firefox, but not in Chrome. While I can display data URLs as images using <img src="data:...">, the files in my case can be any type—not just images.

Is there a reliable, cross-browser way to handle JavaScript download file from URL, especially when using data URLs for binary content like this?

2

I’ve worked with web development for over a decade, and when it comes to a reliable approach for a javascript download file from url scenario, I usually reach for the Blob + anchor method.

function downloadFile(dataURL, filename) {
  const blob = dataURLToBlob(dataURL);
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
}

function dataURLToBlob(dataURL) {
  const [metadata, base64Data] = dataURL.split(',');
  const byteString = atob(base64Data);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }
  return new Blob([uint8Array], { type: metadata.split(':')[1].split(';')[0] });
}

This approach works well in most modern browsers like Chrome, Firefox, and Edge, and it keeps things clean—especially when dealing with binary data. I’ve used it countless times when building tools that needed a clean javascript download file from url solution.

3

Nice! I’ve had to support legacy enterprise apps too, and here’s a tweak I often include when Internet Explorer compatibility is a must (yeah, it still comes up occasionally).

function downloadFile(dataURL, filename) {
  const blob = dataURLToBlob(dataURL);
  if (window.navigator && window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, filename); // For IE
  } else {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = filename;
    link.click();
  }
}

This builds directly on Tom’s Blob approach, but adds support for navigator.msSaveBlob() in IE. If you’re aiming for broad compatibility in your javascript download file from url implementation, this ensures you don’t leave behind users stuck on older browsers.

4

Absolutely love these approaches. For something even more minimal, especially in cases where the data URL is already valid and doesn’t require Blob conversion, here’s a super lightweight option I’ve used.

function downloadFile(dataURL, filename) {
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = filename;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

It won’t work for every file type or super large downloads, but when you’re working with simple use-cases, like small base64-encoded files, this method nails the javascript download file from url task with minimal fuss.