Necesito descargar el archivo del servidor a través de ajax. El problema es que el archivo no está almacenado en el servidor. Mi backend basado en Java genera automáticamente un archivo a partir de los parámetros de solicitud y lo devuelve en el cuerpo de respuesta:
@RequestMapping(value = "/download", method = RequestMethod.GET) public void download(@RequestParam String description, @RequestParam Long logId, HttpServletResponse response) { try { InputStream fileContent = // getting file as byte stream response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE); response.setHeader("Content-Disposition", "attachment; filename=file.zip"); ServletOutputStream responseOutputStream = response.getOutputStream(); org.apache.commons.io.IOUtils.copy(fileContent, responseOutputStream); response.flushBuffer(); } catch (IOException e) { logger.error("Attempt to download file failed", e); } }Entonces necesito manejarlo y permitir que el usuario descargue el archivo. Mi lado del cliente contiene esto:
$.ajax({ type: "GET", url: "/download", data: { description: "test", logId: 123 }, success: function(data) { var blob = new Blob([data]); var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = "file.zip"; link.click(); } })El controlador devuelve el archivo, pero luego no pasa nada. ¿Qué estoy haciendo mal?
No haga una llamada AJAX, sino que configure el href de la ventana para que apunte a la URL para descargar el archivo. Luego cambie el tipo de contenido de la respuesta a application/x-download y configure el encabezado de la respuesta para que sea Content-disposition :
response.setContentType("application/x-download"); response.setHeader("Content-disposition", "attachment; filename=" + fileName); response.flushBuffer(); function download(fileName) { window.location.href = "/download?description=test&logId=123"; }Además, eche un vistazo a esta publicación SO que aborda un problema similar al que tiene.
Para aquellos que buscan un enfoque más moderno, pueden usar la fetch API . El siguiente ejemplo muestra cómo descargar un archivo PDF . Se hace fácilmente con el siguiente código.
fetch(url, { body: JSON.stringify(data), method: 'POST', headers: { 'Content-Type': 'application/json; charset=utf-8' }, }) .then(response => response.blob()) .then(response => { const blob = new Blob([response], {type: 'application/pdf'}); const downloadUrl = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = downloadUrl; a.download = "file.pdf"; document.body.appendChild(a); a.click(); }) Creo que este enfoque es mucho más fácil de entender que otras soluciones XMLHttpRequest . Además, tiene una sintaxis similar al enfoque de jQuery , sin necesidad de agregar bibliotecas adicionales.
Por supuesto, recomendaría verificar para qué navegador está desarrollando, ya que este nuevo enfoque no funcionará en IE. Puede encontrar la lista completa de compatibilidad de navegadores en el siguiente [enlace][1].
Importante : en este ejemplo, estoy enviando una solicitud JSON a un servidor que escucha en la url dada. Esta url debe configurarse, en mi ejemplo, asumo que conoce esta parte. Además, considere los encabezados necesarios para que su solicitud funcione. Como estoy enviando un JSON, debo agregar el encabezado Content-Type y configurarlo en application/json; charset=utf-8 , para que el servidor sepa el tipo de solicitud que recibirá.
Importante : el envío de parámetros a una solicitud 'GET' utilizando la fetch API de obtención necesitaría utilizar la interfaz URLSearchParams .