For simpler use cases where you don't mind the browser's default behavior, you can use these one-liners:
function downloadBlob(data, fileName, mimeType) const blob = new Blob([data], type: mimeType ); // Create a binary large object const url = window.URL.createObjectURL(blob); // Generate a temporary browser URL const link = document.createElement('a'); link.href = url; link.download = fileName; link.click(); window.URL.revokeObjectURL(url); // Free up memory after the download starts Use code with caution. 3. Handling Cross-Origin Restricted Files
This guide explores the various ways to implement this, ranging from simple link redirections to handling complex in-memory data. 1. The Standard Dynamic Anchor Method javascript start download in browser
Use the fetch API to download the file as a blob first, then use the Blob method above to trigger the download from your own origin. javascript
The HTML5 download attribute only works for files on the (same domain, protocol, and port). If you need to download a file from an external URL (like an S3 bucket), the browser may simply open the file in a new tab instead of downloading it. For simpler use cases where you don't mind
If your application generates data on the fly—such as a CSV export or a JSON configuration—you can use the and Object URLs . javascript
If the file is already available as a URL, this happens entirely on the client side. 2. Downloading In-Memory Data (Blobs) If you need to download a file from
function downloadFile(url, fileName) ''; // Suggest a filename document.body.appendChild(link); // Required for Firefox compatibility link.click(); // Trigger the download document.body.removeChild(link); // Clean up the DOM Use code with caution.
This is the most common approach for modern browsers. It creates a temporary, invisible link and "clicks" it to bypass the need for a physical button to be wrapped in an anchor tag. javascript