Descargando archivo desde la API de .NET Core utilizando Vue.js
He estado trabajando en una aplicación Vuejs con .net core como backend. Ahora estoy enfrentando un problema al intentar descargar un archivo (una plantilla de Excel) almacenada en el servidor. He utilizado un Blob para descargar el contenido del archivo desde la API. Pero los archivos descargados están vacíos. He verificado la API utilizando Postman y el archivo se puede descargar correctamente. No estoy seguro de qué estoy haciendo mal. A continuación se muestra el código que he intentado.
Controlador de la API:
[HttpGet("GetFileContent/{filename}")]
public async Task<FileStream> GetFileContent(string filename)
{
try
{
var path = Path.Combine(_environment.WebRootPath, "Uploaded RequestLetters\\Countries", filename);
return new FileStream(path, FileMode.Open, FileAccess.Read);
}
catch (Exception e)
{
throw e;
}
}
El servicio se crea de la siguiente manera,
getStreamData(payload: any) {
const url = `{$app.base_url}/api/RequestLetter/GetFileContent/`+ payload;
return http.get(url,{ responseType: 'blob'});
}
El código de descarga del archivo es el siguiente,
openAttachment(item) {
this.getStream(item.name).then((res)=>{
let blob = new Blob([res.data], { type: item.contentType });
const link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = item.name;
link.click();
link.remove();
});
}
¿Qué me falta? ¿Alguien puede especificar la razón detrás de este problema?
Cualquier ayuda sería apreciada. ¡Gracias!
davy.ai
Problema al descargar archivo almacenado en el servidor usando Blob
Has estado trabajando en una aplicación Vue.js con .net core como backend y has encontrado un problema al descargar un archivo (plantilla de Excel) almacenado en el servidor. Has intentado utilizar un Blob para descargar el contenido del archivo desde la API, pero los archivos descargados están vacíos. Sin embargo, cuando has comprobado la API utilizando Postman, el archivo se ha descargado correctamente. No estás seguro de dónde está el problema.
En tu controlador de API, has definido un método HTTP GET que recibe un nombre de archivo como parámetro y devuelve un FileStream. El FileStream se crea utilizando el método Path.Combine para obtener la ruta física del archivo en el servidor, y luego se crea un nuevo FileStream utilizando la ruta, FileMode.Open y FileAccess.Read.
En tu servicio, has definido un método getStreamData que recibe una carga útil (nombre de archivo) y devuelve una promesa que realiza una solicitud HTTP GET a la API utilizando la URL obtenida concatenando el nombre de archivo a la base_url. Estás utilizando axios para realizar la solicitud y establecer el responseType en ‘blob’, lo que asegurará que los datos de respuesta se devuelvan como un objeto Blob.
En tu código de descarga de archivos, has definido un método openAttachment que recibe un elemento (archivo) como parámetro y utiliza el método getStream para obtener el contenido del archivo como un objeto Blob. Luego creas un nuevo objeto Blob utilizando los datos de respuesta y el contentType del elemento, y creas un nuevo elemento de enlace en la página. La href del enlace se establece en la URL creada utilizando el objeto Blob, el atributo de descarga se establece en el nombre de archivo del elemento y luego se hace clic en el enlace programáticamente para iniciar la descarga.
Parece que el problema puede no estar en el código del lado del servidor o en la API, sino en el código del lado del cliente. Puedes comprobar si la carga útil (nombre de archivo) se está pasando correctamente a la API y si los datos de respuesta se reciben correctamente por el cliente. Puedes utilizar declaraciones console.log para depurar el código y ver qué valores se pasan o reciben en cada paso.
Además, asegúrate de que el archivo que se está descargando no esté dañado o vacío en el servidor y que se estén pasando correctamente el nombre de archivo y el contentType al cliente. Puedes solucionar estos problemas comprobando el tamaño y el contenido del archivo en el servidor e inspeccionando las cabeceras y los datos de respuesta utilizando las herramientas de desarrollo del navegador o un sniffer de paquetes de red.