To download an image from a Base64 string in Angular, you essentially need to convert the encoded data into a format the browser can "save" as a file. This is typically done by creating a temporary anchor ( ) element or using a dedicated library like FileSaver.js. 1. Basic Anchor Tag Method
If you are displaying the image before downloading, use DomSanitizer to avoid "unsafe" URL warnings.
Always call URL.revokeObjectURL() after the download to prevent memory leaks. download image from base64 angular
You can use a helper function to turn the encoded string into a raw binary format. typescript
downloadImage(base64String: string, fileName: string) { // Ensure the string has the correct data URL prefix const source = `data:image/png;base64,${base64String}`; const link = document.createElement("a"); link.href = source; link.download = fileName; // The name the file will have when saved link.click(); } Use code with caution. 2. The Blob Method (Best for Large Images) To download an image from a Base64 string
import { saveAs } from 'file-saver'; downloadWithFileSaver(base64: string, name: string) { const blob = this.base64ToBlob(base64); saveAs(blob, name); } Use code with caution. Performance and Best Practices
downloadBlobImage(base64: string, name: string) { const blob = this.base64ToBlob(base64); const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = name; link.click(); // Clean up the URL object to free memory window.URL.revokeObjectURL(url); } Use code with caution. 3. Using FileSaver.js Basic Anchor Tag Method If you are displaying
This is the most straightforward approach for modern browsers. It creates a hidden link, sets its href to your Base64 data URL, and programmatically clicks it. typescript