const exportJsonData = (data, filename = 'export.json') => { // Convert object to string const jsonString = JSON.stringify(data, null, 2); // Create a blob with the correct MIME type const blob = new Blob([jsonString], { type: 'application/json' }); // Create an object URL pointing to the blob const url = URL.createObjectURL(blob); // Trigger download using the anchor method const link = document.createElement('a'); link.href = url; link.download = filename; link.click(); // Clean up memory URL.revokeObjectURL(url); }; Use code with caution. Best Practice: Memory Management
If you attempt to use the download attribute on a cross-origin URL, the browser will open the file in a new tab instead of saving it. To bypass this on the client side, route the request through fetch() to transform it into a local Blob URL: javascript javascript trigger browser download
Always call URL.revokeObjectURL(url) after the download triggers. Object URLs live in the browser's memory until the document is unloaded. Failing to revoke them causes memory leaks, especially in Single Page Applications (SPAs). 🖼️ Method 2: Downloading Canvas and Image Files const exportJsonData = (data, filename = 'export
To download an image generated on an HTML5 element (e.g., a photo editor or chart), convert the canvas contents into a Data URL or a Blob. Using canvas.toDataURL() (For Small Images) javascript Object URLs live in the browser's memory until
The simplest way to trigger a download is by using an HTML anchor ( ) element combined with the download attribute. When this attribute is present, the browser downloads the linked resource instead of navigating to it. javascript