Descargar un archivo por jQuery.Ajax

Tengo una acción Struts2 en el lado del servidor para la descarga de archivos.

<action name="download" class="com.xxx.DownAction">
    <result name="success" type="stream">
        <param name="contentType">text/plain</param>
        <param name="inputName">imageStream</param>
        <param name="contentDisposition">attachment;filename={fileName}</param>
        <param name="bufferSize">1024</param>
    </result>
</action>

Sin embargo, cuando llamo a la acción usando jQuery:

$.post(
  "/download.action",{
    para1:value1,
    para2:value2
    ....
  },function(data){
      console.info(data);
   }
);

En Firebug veo que los datos se recuperan con la secuencia binaria . Me pregunto cómo abrir la ventana de descarga de archivos con la que el usuario puede guardar el archivo localmente.

Actualización de navegadores modernos 2019

Este es el enfoque que ahora recomendaría con algunas advertencias:

• Se requiere un navegador relativamente moderno
• Si se espera que el archivo sea muy grande , probablemente debería hacer algo similar al enfoque original (iframe y cookie) porque algunas de las operaciones a continuación podrían consumir memoria del sistema al menos tan grande como el archivo que se descarga y / u otra CPU interesante efectos secundarios.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

Enfoque basado en jQuery / iframe / cookie original de 2012

Bluish tiene toda la razón sobre esto, no puede hacerlo a través de Ajax porque JavaScript no puede guardar archivos directamente en la computadora de un usuario (por motivos de seguridad). Desafortunadamente, señalar la URL de la ventana principal en la descarga de su archivo significa que tiene poco control sobre la experiencia del usuario cuando se produce una descarga de archivo.

He creado jQuery Descarga de archivos que permite una "Ajax como" experiencia con las descargas de archivos completos con onSuccess y onFailure devoluciones de llamada para proporcionar una mejor experiencia de usuario. Echa un vistazo a mi blog sobre el problema común que resuelve el complemento y algunas formas de usarlo y también un demostración de jQuery File Download en acción . Aquí esta la fuente

Aquí hay una demostración de caso de uso simple usando la fuente del complemento con promesas. La página de demostración incluye muchos otros ejemplos de 'mejor UX'.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

Dependiendo de los navegadores que necesite admitir, puede usar https://github.com/eligrey/FileSaver.js/ que permite un control más explícito que el método IFRAME que utiliza la descarga de archivos jQuery.

Nadie publicó esta solución de @ Pekka ... así que la publicaré. Puede ayudar a alguien.

No necesita hacer esto a través de Ajax. Solo usa

window.location="download.action?para1=value1...."

Puedes con HTML5

NB: los datos de archivo devueltos DEBEN estar codificados en base64 porque no puede codificar JSON datos binarios

En mi AJAXrespuesta, tengo una estructura de datos que se ve así:

{
    result: 'OK',
    download: {
        mimetype: string(mimetype in the form 'major/minor'),
        filename: string(the name of the file to download),
        data: base64(the binary data as base64 to download)
    }
}

Eso significa que puedo hacer lo siguiente para guardar un archivo a través de AJAX

var a = document.createElement('a');
if (window.URL && window.Blob && ('download' in a) && window.atob) {
    // Do it the HTML5 compliant way
    var blob = base64ToBlob(result.download.data, result.download.mimetype);
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = result.download.filename;
    a.click();
    window.URL.revokeObjectURL(url);
}

La función base64ToBlob se tomó de aquí y debe usarse de conformidad con esta función

function base64ToBlob(base64, mimetype, slicesize) {
    if (!window.atob || !window.Uint8Array) {
        // The current browser doesn't have the atob function. Cannot continue
        return null;
    }
    mimetype = mimetype || '';
    slicesize = slicesize || 512;
    var bytechars = atob(base64);
    var bytearrays = [];
    for (var offset = 0; offset < bytechars.length; offset += slicesize) {
        var slice = bytechars.slice(offset, offset + slicesize);
        var bytenums = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            bytenums[i] = slice.charCodeAt(i);
        }
        var bytearray = new Uint8Array(bytenums);
        bytearrays[bytearrays.length] = bytearray;
    }
    return new Blob(bytearrays, {type: mimetype});
};

Esto es bueno si su servidor está volcando datos de archivos para guardar. Sin embargo, aún no he resuelto cómo se implementaría un respaldo HTML4

1. Marco independiente: archivo de descarga de servlet como archivo adjunto

<!-- with JS -->
<a href="javascript:window.location='downloadServlet?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadServlet?param1=value1" >download</a>

2. Struts2 Framework: Acción descargando archivo como archivo adjunto

<!-- with JS -->
<a href="javascript:window.location='downloadAction.action?param1=value1'">
    download
</a>

<!-- without JS -->
<a href="downloadAction.action?param1=value1" >download</a>

Sería mejor usar la <s:a>etiqueta apuntando con OGNL a una URL creada con la <s:url>etiqueta:

<!-- without JS, with Struts tags: THE RIGHT WAY -->    
<s:url action="downloadAction.action" var="url">
    <s:param name="param1">value1</s:param>
</s:ulr>
<s:a href="%{url}" >download</s:a>

En los casos anteriores, debe escribir el encabezado Content-Disposition en la respuesta , especificando que el archivo debe ser descargado ( attachment) y no abierto por el navegador ( inline). También debe especificar el Tipo de contenido , y es posible que desee agregar el nombre y la longitud del archivo (para ayudar al navegador a dibujar una barra de progreso realista).

Por ejemplo, al descargar un ZIP:

response.setContentType("application/zip");
response.addHeader("Content-Disposition", 
                   "attachment; filename=\"name of my file.zip\"");
response.setHeader("Content-Length", myFile.length()); // or myByte[].length...

Con Struts2 (a menos que esté utilizando la Acción como un Servlet, un truco para la transmisión directa , por ejemplo), no necesita escribir directamente nada en la respuesta; simplemente usando el tipo de resultado Stream y configurándolo en struts.xml funcionará: EJEMPLO

<result name="success" type="stream">
   <param name="contentType">application/zip</param>
   <param name="contentDisposition">attachment;filename="${fileName}"</param>
   <param name="contentLength">${fileLength}</param>
</result>

3. Framework agnóstico (/ Struts2 framework): Servlet (/ Action) abriendo el archivo dentro del navegador

Si desea abrir el archivo dentro del navegador, en lugar de descargarlo, la disposición de contenido debe establecerse en línea , pero el destino no puede ser la ubicación actual de la ventana; debe orientar una nueva ventana creada por javascript, una <iframe>en la página o una nueva ventana creada sobre la marcha con el "discutido" target = "_ blank":

<!-- From a parent page into an IFrame without javascript -->   
<a href="downloadServlet?param1=value1" target="iFrameName">
    download
</a>

<!-- In a new window without javascript --> 
<a href="downloadServlet?param1=value1" target="_blank">
    download
</a>

<!-- In a new window with javascript -->    
<a href="javascript:window.open('downloadServlet?param1=value1');" >
    download
</a>

La manera simple de hacer que el navegador descargue un archivo es hacer la solicitud de esta manera:

 function downloadFile(urlToSend) {
     var req = new XMLHttpRequest();
     req.open("GET", urlToSend, true);
     req.responseType = "blob";
     req.onload = function (event) {
         var blob = req.response;
         var fileName = req.getResponseHeader("fileName") //if you have the fileName header available
         var link=document.createElement('a');
         link.href=window.URL.createObjectURL(blob);
         link.download=fileName;
         link.click();
     };

     req.send();
 }

Esto abre la ventana emergente de descarga del navegador.

He creado poca función como solución alternativa (inspirada en el complemento @ JohnCulviner):

// creates iframe and form in it with hidden field,
// then submit form with provided data
// url - form url
// data - data to form field
// input_name - form hidden input name

function ajax_download(url, data, input_name) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" +
                  "<input type=hidden name='" + input_name + "' value='" +
                  JSON.stringify(data) +"'/></form>" +
                  "</body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

Demostración con evento de clic:

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2}, 'dataname');
});

Enfrenté el mismo problema y lo resolví con éxito. Mi caso de uso es este.

" Publique datos JSON en el servidor y reciba un archivo de Excel. Ese archivo de Excel es creado por el servidor y devuelto como respuesta al cliente. Descargue esa respuesta como un archivo con nombre personalizado en el navegador "

$("#my-button").on("click", function(){

// Data to post
data = {
    ids: [1, 2, 3, 4, 5]
};

// Use XMLHttpRequest instead of Jquery $ajax
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    var a;
    if (xhttp.readyState === 4 && xhttp.status === 200) {
        // Trick for making downloadable link
        a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhttp.response);
        // Give filename you wish to download
        a.download = "test-file.xls";
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
    }
};
// Post data to URL which handles post request
xhttp.open("POST", excelDownloadUrl);
xhttp.setRequestHeader("Content-Type", "application/json");
// You should set responseType as blob for binary responses
xhttp.responseType = 'blob';
xhttp.send(JSON.stringify(data));
});

El fragmento anterior solo hace lo siguiente

• Publicar una matriz como JSON en el servidor utilizando XMLHttpRequest.
• Después de buscar contenido como un blob (binario), estamos creando una URL descargable y adjuntándola a un enlace invisible "a" y luego haciendo clic en ella. Hice una solicitud POST aquí. En cambio, también puedes optar por un GET simple. No podemos descargar el archivo a través de Ajax, debemos usar XMLHttpRequest.

Aquí necesitamos establecer cuidadosamente algunas cosas en el lado del servidor. Configuré algunos encabezados en Python Django HttpResponse. Debe configurarlos en consecuencia si usa otros lenguajes de programación.

# In python django code
response = HttpResponse(file_content, content_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

Desde que descargo xls (excel) aquí, ajusté contentType al anterior. Debe configurarlo de acuerdo con su tipo de archivo. Puede usar esta técnica para descargar cualquier tipo de archivo.

Ok, basado en el código de ndpu heres una versión mejorada (creo) de ajax_download; -

function ajax_download(url, data) {
    var $iframe,
        iframe_doc,
        iframe_html;

    if (($iframe = $('#download_iframe')).length === 0) {
        $iframe = $("<iframe id='download_iframe'" +
                    " style='display: none' src='about:blank'></iframe>"
                   ).appendTo("body");
    }

    iframe_doc = $iframe[0].contentWindow || $iframe[0].contentDocument;
    if (iframe_doc.document) {
        iframe_doc = iframe_doc.document;
    }

    iframe_html = "<html><head></head><body><form method='POST' action='" +
                  url +"'>" 

    Object.keys(data).forEach(function(key){
        iframe_html += "<input type='hidden' name='"+key+"' value='"+data[key]+"'>";

    });

        iframe_html +="</form></body></html>";

    iframe_doc.open();
    iframe_doc.write(iframe_html);
    $(iframe_doc).find('form').submit();
}

Use esto así; -

$('#someid').on('click', function() {
    ajax_download('/download.action', {'para1': 1, 'para2': 2});
});

Los parámetros se envían como parámetros posteriores apropiados como si vinieran de una entrada en lugar de una cadena codificada json como en el ejemplo anterior.

PRECAUCIÓN: Tenga cuidado con el potencial de inyección variable en esas formas. Puede haber una forma más segura de codificar esas variables. Alternativamente, contempla escapar de ellos.

Esto es lo que hice, javascript puro y html. No lo probé, pero esto debería funcionar en todos los navegadores.

Función Javascript

var iframe = document.createElement('iframe');
iframe.id = "IFRAMEID";
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.src = 'SERVERURL'+'?' + $.param($scope.filtro);
iframe.addEventListener("load", function () {
     console.log("FILE LOAD DONE.. Download should start now");
});

Al usar solo componentes que son compatibles con todos los navegadores, no se necesitan bibliotecas adicionales.

Aquí está mi código de controlador JAVA Spring del lado del servidor.

@RequestMapping(value = "/rootto/my/xlsx", method = RequestMethod.GET)
public void downloadExcelFile(@RequestParam(value = "param1", required = false) String param1,
    HttpServletRequest request, HttpServletResponse response)
            throws ParseException {

    Workbook wb = service.getWorkbook(param1);
    if (wb != null) {
        try {
            String fileName = "myfile_" + sdf.format(new Date());
            response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
            response.setHeader("Content-disposition", "attachment; filename=\"" + fileName + ".xlsx\"");
            wb.write(response.getOutputStream());
            response.getOutputStream().close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    }

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

En Rails, lo hago de esta manera:

function download_file(file_id) {
  let url       = '/files/' + file_id + '/download_file';
    $.ajax({
    type: 'GET',
    url: url,
    processData: false,
    success: function (data) {
       window.location = url;
    },
    error: function (xhr) {
     console.log(' Error:  >>>> ' + JSON.stringify(xhr));
    }
   });
 }

El truco es la parte window.location . El método del controlador se ve así:

# GET /files/{:id}/download_file/
def download_file
    send_file(@file.file,
          :disposition => 'attachment',
          :url_based_filename => false)
end

Use window.open https://developer.mozilla.org/en-US/docs/Web/API/Window/open

Por ejemplo, puede poner esta línea de código en un controlador de clics:

window.open('/file.txt', '_blank');

Se abrirá una nueva pestaña (debido al nombre de la ventana '_blank') y esa pestaña abrirá la URL.

Su código del lado del servidor también debería tener algo como esto:

res.set('Content-Disposition', 'attachment; filename=file.txt');

Y de esa manera, el navegador debe solicitar al usuario que guarde el archivo en el disco, en lugar de solo mostrarle el archivo. También cerrará automáticamente la pestaña que acaba de abrir.

Intento descargar un archivo CSV y luego hacer algo después de que la descarga haya finalizado. Entonces necesito implementar una callbackfunción apropiada .

Usar window.location="..."no es una buena idea porque no puedo operar el programa después de terminar la descarga. Algo como esto, cambia el encabezado para que no sea una buena idea.

fetches una buena alternativa, sin embargo, no puede soportar IE 11 . Y window.URL.createObjectURLno puede soportar IE 11. Puedes referir esto .

Este es mi código, es similar al código de Shahrukh Alam. Pero debe tener cuidado de que window.URL.createObjectURLtal vez cree pérdidas de memoria. Puedes referir esto . Cuando llegue la respuesta, los datos se almacenarán en la memoria del navegador. Entonces, antes de hacer clic en el aenlace, el archivo se ha descargado. Significa que puede hacer cualquier cosa después de la descarga.

$.ajax({
    url: 'your download url',
    type: 'GET',
}).done(function (data, textStatus, request) {
    // csv => Blob
    var blob = new Blob([data]);

    // the file name from server.
    var fileName = request.getResponseHeader('fileName');

    if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(blob, fileName);
    } else { // for others
    var url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);

    //Do something after download 
    ...

    }
}).then(after_download)
}

Cómo DESCARGAR un archivo después de recibirlo por AJAX

Es conveniente cuando el archivo se crea durante mucho tiempo y necesita mostrar PRELOADER

Ejemplo al enviar un formulario web:

<script>
$(function () {
    $('form').submit(function () {
        $('#loader').show();
        $.ajax({
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'binary',
            xhrFields: {
                'responseType': 'blob'
            },
            success: function(data, status, xhr) {
                $('#loader').hide();
                // if(data.type.indexOf('text/html') != -1){//If instead of a file you get an error page
                //     var reader = new FileReader();
                //     reader.readAsText(data);
                //     reader.onload = function() {alert(reader.result);};
                //     return;
                // }
                var link = document.createElement('a'),
                    filename = 'file.xlsx';
                // if(xhr.getResponseHeader('Content-Disposition')){//filename 
                //     filename = xhr.getResponseHeader('Content-Disposition');
                //     filename=filename.match(/filename="(.*?)"/)[1];
                //     filename=decodeURIComponent(escape(filename));
                // }
                link.href = URL.createObjectURL(data);
                link.download = filename;
                link.click();
            }
        });
        return false;
    });
});
</script>

Opcional funcional se comenta para simplificar el ejemplo.

No es necesario crear archivos temporales en el servidor.

En jQuery v2.2.4 OK. Habrá un error en la versión anterior:

Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'blob').

Agregar algunas cosas más a la respuesta anterior para descargar un archivo

A continuación se muestra un código java spring que genera una matriz de bytes

@RequestMapping(value = "/downloadReport", method = { RequestMethod.POST })
    public ResponseEntity<byte[]> downloadReport(
            @RequestBody final SomeObejct obj, HttpServletResponse response) throws Exception {

        OutputStream out = new ByteArrayOutputStream();
        // write something to output stream
        HttpHeaders respHeaders = new HttpHeaders();
        respHeaders.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        respHeaders.add("X-File-Name", name);
        ByteArrayOutputStream bos = (ByteArrayOutputStream) out;
        return new ResponseEntity<byte[]>(bos.toByteArray(), respHeaders, HttpStatus.CREATED);
    }

Ahora en código javascript usando FileSaver.js, puede descargar un archivo con el siguiente código

var json=angular.toJson("somejsobject");
var url=apiEndPoint+'some url';
var xhr = new XMLHttpRequest();
//headers('X-File-Name')
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 201) {
        var res = this.response;
        var fileName=this.getResponseHeader('X-File-Name');
        var data = new Blob([res]);
        saveAs(data, fileName); //this from FileSaver.js
    }
}    
xhr.open('POST', url);
xhr.setRequestHeader('Authorization','Bearer ' + token);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'arraybuffer';
xhr.send(json);

Lo anterior descargará el archivo

Ok, aquí está el código de trabajo al usar MVC y estás obteniendo tu archivo de un controlador

supongamos que tiene su conjunto de bytes declarar y llenar, lo único que debe hacer es usar la función de archivo (usando System.Web.Mvc)

byte[] bytes = .... insert your bytes in the array
return File(bytes, System.Net.Mime.MediaTypeNames.Application.Octet, "nameoffile.exe");

y luego, en el mismo controlador, agregue estas 2 funciones

protected override void OnResultExecuting(ResultExecutingContext context)
    {
        CheckAndHandleFileResult(context);

        base.OnResultExecuting(context);
    }

    private const string FILE_DOWNLOAD_COOKIE_NAME = "fileDownload";

    /// <summary>
    /// If the current response is a FileResult (an MVC base class for files) then write a
    /// cookie to inform jquery.fileDownload that a successful file download has occured
    /// </summary>
    /// <param name="context"></param>
    private void CheckAndHandleFileResult(ResultExecutingContext context)
    {
        if (context.Result is FileResult)
            //jquery.fileDownload uses this cookie to determine that a file download has completed successfully
            Response.SetCookie(new HttpCookie(FILE_DOWNLOAD_COOKIE_NAME, "true") { Path = "/" });
        else
            //ensure that the cookie is removed in case someone did a file download without using jquery.fileDownload
            if (Request.Cookies[FILE_DOWNLOAD_COOKIE_NAME] != null)
                Response.Cookies[FILE_DOWNLOAD_COOKIE_NAME].Expires = DateTime.Now.AddYears(-1);
    }

y luego podrá llamar a su controlador para descargar y obtener la devolución de llamada de "éxito" o "falla"

$.fileDownload(mvcUrl('name of the controller'), {
            httpMethod: 'POST',
            successCallback: function (url) {
            //insert success code

            },
            failCallback: function (html, url) {
            //insert fail code
            }
        });

Encontré una solución que, si bien en realidad no está usando ajax, le permite usar una llamada de JavaScript para solicitar la descarga y luego recibir una devolución de llamada cuando la descarga realmente comienza. Esto me pareció útil si el enlace ejecuta un script del lado del servidor que toma un poco de tiempo para componer el archivo antes de enviarlo. para que pueda alertarlos de que se está procesando, y luego, cuando finalmente envíe el archivo, elimine esa notificación de procesamiento. Por eso, para empezar, quería intentar cargar el archivo a través de ajax para poder tener un evento cuando se solicita el archivo y otro cuando realmente comienza a descargarse.

el js en la portada

function expdone()
{
    document.getElementById('exportdiv').style.display='none';
}
function expgo()
{
   document.getElementById('exportdiv').style.display='block';
   document.getElementById('exportif').src='test2.php?arguments=data';
}

el iframe

<div id="exportdiv" style="display:none;">
<img src="loader.gif"><br><h1>Generating Report</h1>
<iframe id="exportif" src="" style="width: 1px;height: 1px; border:0px;"></iframe>
</div>

entonces el otro archivo:

<!DOCTYPE html>
<html>
<head>
<script>
function expdone()
{
    window.parent.expdone();
}
</script>
</head>
<body>
<iframe id="exportif" src="<?php echo "http://10.192.37.211/npdtracker/exportthismonth.php?arguments=".$_GET["arguments"]; ?>"></iframe>
<script>document.getElementById('exportif').onload= expdone;</script>
</body></html>

Creo que hay una manera de leer los datos usando js para que no se necesite php. pero no lo sé de la mano y el servidor que estoy usando es compatible con php, así que esto funciona para mí. pensé en compartirlo en caso de que ayude a alguien.

Si desea utilizar la descarga de archivos jQuery, tenga en cuenta esto para IE. Necesita restablecer la respuesta o no se descargará

    //The IE will only work if you reset response
    getServletResponse().reset();
    //The jquery.fileDownload needs a cookie be set
    getServletResponse().setHeader("Set-Cookie", "fileDownload=true; path=/");
    //Do the reset of your action create InputStream and return

Su acción puede implementar ServletResponseAware para accedergetServletResponse()

Es cierto que no puede hacerlo a través de la llamada Ajax.

Sin embargo, hay una solución.

Pasos:

Si está utilizando form.submit () para descargar el archivo, lo que puede hacer es:

1. Cree una llamada ajax del cliente al servidor y almacene la secuencia de archivos dentro de la sesión.
2. Una vez que se devuelva el "éxito" del servidor, llame a su form.submit () para simplemente transmitir la secuencia del archivo almacenado en la sesión.

Esto es útil en caso de que desee decidir si el archivo debe descargarse o no después de crear form.submit (), por ejemplo: puede haber un caso en el que en form.submit (), se produzca una excepción en el lado del servidor y, en su lugar de bloqueo, es posible que deba mostrar un mensaje personalizado en el lado del cliente, en tal caso, esta implementación podría ayudar.

Hay otra solución para descargar una página web en ajax. Pero me refiero a una página que primero debe procesarse y luego descargarse.

Primero debe separar el procesamiento de la página de la descarga de resultados.

1) Solo los cálculos de la página se realizan en la llamada ajax.

$ .post ("CalculusPage.php", {calculusFunction: true, ID: 29, data1: "a", data2: "b"},

       función (datos, estado) 
       {
            if (estado == "éxito") 
            {
                / * 2) En la respuesta se descarga la página que usa los cálculos anteriores. Por ejemplo, esta puede ser una página que imprime los resultados de una tabla calculada en la llamada ajax. * /
                window.location.href = DownloadPage.php + "? ID =" + 29;
            }               
       }
);

// Por ejemplo: en CalculusPage.php

    if (! empty ($ _ POST ["calculusFunction"])) 
    {
        $ ID = $ _POST ["ID"];

        $ query = "INSERTAR EN LA PÁGINA DE EJEMPLO (data1, data2) VALORES ('". $ _ POST ["data1"]. "', '". $ _ POST ["data2"]. "') DONDE id =". $ ID;
        ...
    }

// Por ejemplo: en el DownloadPage.php

    $ ID = $ _GET ["ID"];

    $ sede = "SELECT * FROM ExamplePage WHERE id =". $ ID;
    ...

    $ filename = "Export_Data.xls";
    header ("Content-Type: application / vnd.ms-excel");
    header ("Content-Disposition: inline; filename = $ filename");

    ...

Espero que esta solución pueda ser útil para muchos, como lo fue para mí.

The HTML Code:-

'<button type="button" id="GetFile">Get File!</button>'


The jQuery Code:-

'$('#GetFile').on('click', function () {
    $.ajax({
        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/172905/test.pdf',
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            var a = document.createElement('a');
            var url = window.URL.createObjectURL(data);
            a.href = url;
            a.download = 'myfile.pdf';
            document.body.append(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        }
    });
});'

Eso funciona muy bien en cualquier navegador (estoy usando asp.net core)

            function onDownload() {

  const api = '@Url.Action("myaction", "mycontroller")'; 
  var form = new FormData(document.getElementById('form1'));

  fetch(api, { body: form, method: "POST"})
      .then(resp => resp.blob())
      .then(blob => {
          const url = window.URL.createObjectURL(blob);
        $('#linkdownload').attr('download', 'Attachement.zip');
          $('#linkdownload').attr("href", url);
          $('#linkdownload')
              .fadeIn(3000,
                  function() { });

      })
      .catch(() => alert('An error occurred'));



}

 
 <button type="button" onclick="onDownload()" class="btn btn-primary btn-sm">Click to Process Files</button>
 
 
 
 <a role="button" href="#" style="display: none" class="btn btn-sm btn-secondary" id="linkdownload">Click to download Attachments</a>
 
 
 <form asp-controller="mycontroller" asp-action="myaction" id="form1"></form>
 
 

        function onDownload() {
            const api = '@Url.Action("myaction", "mycontroller")'; 
            //form1 is your id form, and to get data content of form
            var form = new FormData(document.getElementById('form1'));

            fetch(api, { body: form, method: "POST"})
                .then(resp => resp.blob())
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    $('#linkdownload').attr('download', 'Attachments.zip');
                    $('#linkdownload').attr("href", url);
                    $('#linkdownload')
                        .fadeIn(3000,
                            function() {

                            });
                })
                .catch(() => alert('An error occurred'));                 

        }

Luché con este problema durante mucho tiempo. Finalmente, una elegante biblioteca externa sugerida aquí me ayudó.