📂 Detectando el tipo de archivo automáticamente en Blazor
En el desarrollo web, es común encontrar métodos de descarga que bloquean un único tipo de archivo. Por ejemplo, este patrón típico para Excel:
string contentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
Esto funciona… hasta que quieres descargar un PDF, una imagen o un ZIP. El navegador no sabe interpretarlo correctamente y puede forzar una apertura o mostrar un error.
💡 La solución: detección dinámica del tipo MIME
En ASP.NET Core podemos utilizar
FileExtensionContentTypeProvider
para resolver automáticamente el tipo de contenido
a partir de la extensión del archivo. Así, cualquier descarga —sea
.xlsx
, .pdf
, .jpg
o .zip
—
saldrá con las cabeceras correctas.
using Microsoft.AspNetCore.StaticFiles;
private async Task DownloadFiles(
string filename,
byte[] archivoData)
{
var provider = new FileExtensionContentTypeProvider();
if (!provider.TryGetContentType(filename, out var contentType))
{
contentType = "application/octet-stream"; // Fallback seguro
}
if (Application is BlazorApplication blazorApp)
{
var jsRuntime = blazorApp.ServiceProvider?.GetService(typeof(IJSRuntime)) as IJSRuntime;
if (jsRuntime != null)
{
string base64Data = Convert.ToBase64String(archivoData);
await jsRuntime.InvokeVoidAsync("downloadFile", filename, base64Data, contentType);
}
}
}
🚀 Beneficios de este enfoque
- Universalidad: Funciona con cualquier tipo de archivo reconocido.
- Mantenibilidad: No tendrás que recordar ni buscar MIME types manualmente.
- Mejor experiencia de usuario: El navegador abre o descarga cada archivo según corresponda.
📋 Tabla de tipos MIME más comunes
Extensión | Tipo MIME | Descripción |
---|---|---|
.txt | text/plain | Texto sin formato |
.html / .htm | text/html | Documento HTML |
.css | text/css | Hojas de estilo en cascada |
.js | application/javascript | Archivo JavaScript |
.json | application/json | Datos en formato JSON |
.xml | application/xml | Datos en formato XML |
.jpg / .jpeg | image/jpeg | Imagen JPEG |
.png | image/png | Imagen PNG |
.gif | image/gif | Imagen GIF |
.svg | image/svg+xml | Gráfico vectorial SVG |
application/pdf | Documento PDF | |
.zip | application/zip | Archivo comprimido ZIP |
.rar | application/vnd.rar | Archivo comprimido RAR |
.7z | application/x-7z-compressed | Archivo comprimido 7‑Zip |
.xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | Hoja de cálculo Excel (Office Open XML) |
.xls | application/vnd.ms-excel | Hoja de cálculo Excel (binaria) |
.docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document | Documento Word (Office Open XML) |
.doc | application/msword | Documento Word (binario) |
.pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation | Presentación PowerPoint (Office Open XML) |
.ppt | application/vnd.ms-powerpoint | Presentación PowerPoint (binaria) |
.mp3 | audio/mpeg | Audio MPEG (MP3) |
.wav | audio/wav | Audio sin comprimir WAV |
.mp4 | video/mp4 | Vídeo MP4 |
.avi | video/x-msvideo | Vídeo AVI |
📝 Conclusión
Implementar detección dinámica de tipos MIME en Blazor no solo evita problemas al descargar archivos, sino que también mejora la experiencia del usuario y la mantenibilidad del código. Con una sola implementación genérica, tu aplicación estará lista para servir cualquier tipo de archivo sin ajustes manuales futuros.
✅ Recomendaciones
- Centraliza la lógica de descarga en un único método reutilizable.
- Mantén la tabla de tipos MIME como referencia rápida para tu equipo.
- Combina este enfoque con controles de seguridad para evitar descargas no autorizadas.
- Documenta el patrón en tu repositorio para que nuevos desarrolladores lo adopten fácilmente.