How to open Blob Files in New Tab using dot net and angular

Step 1: Add This code to Angular app

Angular code

async openImageInNewTab(url:any){ await this.blobService.getFile(url).then(res=>{ if(res.success){ this.openFile(res.result.fileContent,res.result.contentType); } }) } openFile(base64Data: string, mimeType: string): void { const fileUrl = `data:${mimeType};base64,${base64Data}`; const newTab = window.open(); // Open a new tab if (newTab) { if (mimeType.startsWith('image/')) { newTab.document.write(` <html> <head><title>Image Viewer</title></head> <body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="${fileUrl}" style="max-width: 100%; max-height: 100%;" /> </body> </html> `); } else if (mimeType === 'application/pdf') { newTab.document.write(` <html> <head><title>PDF Viewer</title></head> <body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;"> <embed src="${fileUrl}" style="width: 100%; height: 100%;" type="application/pdf" /> </body> </html> `); } else { // For unsupported types, force download const link = document.createElement('a'); link.href = fileUrl; link.download = 'file'; link.click(); } newTab.document.close(); } else { console.error('Failed to open a new tab.'); } }

Html Side Code

HTML Code

<!-- Paste your HTML, CSS, or JS code here --> <button (click)="yourbloblink" class="blue-text" >view</button>

Step 2: Add DotNet Code To Download blob File.

Dot Net Code

public async Task<IActionResult> DownloadBlobFileAsync(string blobUrl) { // Parse the Blob URL Uri blobUri = new Uri(blobUrl); string[] segments = blobUri.AbsolutePath.TrimStart('/').Split('/'); if (segments.Length < 2) { throw new ArgumentException("Invalid Blob URL.", nameof(blobUrl)); } // Extract container name and blob name string containerName = segments[0]; string blobName = string.Join('/', segments[1..]); BlobContainerClient containerClient = _blobServiceClient.GetBlobContainerClient(containerName.ToLower()); if (!(await containerClient.ExistsAsync())) { throw new ArgumentException("Container does not exist.", nameof(containerName)); } BlobClient blobClient = containerClient.GetBlobClient(blobName); // Check if the blob exists if (!await blobClient.ExistsAsync()) { return new NotFoundObjectResult("Blob not found."); } // Download the blob var response = await blobClient.DownloadAsync(); // Determine content type using GetMimeType method string contentType = response.Value.Details.ContentType ?? GetMimeType(blobName); // Create a new memory stream to hold blob content var memoryStream = new MemoryStream(); await response.Value.Content.CopyToAsync(memoryStream); memoryStream.Position = 0; // Return the file as a FileStreamResult without disposing the stream here return new FileStreamResult(memoryStream, contentType) { FileDownloadName = blobName }; } private string GetMimeType(string fileName) { var extension = Path.GetExtension(fileName).ToLowerInvariant(); return extension switch { ".jpg" or ".jpeg" => "image/jpeg", ".png" => "image/png", ".gif" => "image/gif", ".bmp" => "image/bmp", ".tif" or ".tiff" => "image/tiff", ".pdf" => "application/pdf", ".txt" => "text/plain", ".html" or ".htm" => "text/html", ".css" => "text/css", ".js" => "application/javascript", ".json" => "application/json", ".xml" => "application/xml", _ => MediaTypeNames.Application.Octet }; }

Note: use this in your api service