Descargar file a través de jquery ajax post

Estoy tratando de exportar los datos de mi página web y downloadlos como file de Excel. pero la descarga no comienza, incluso el retorno de la respuesta tiene éxito.

$.ajax({ type: "POST", url: _url, contentType: 'multipart/form-data;boundary=SzB12x', data: json, }); 

El text de respuesta es algo como esto:

PK J; F xl / theme / theme1.xml YOo 6 , [r n; v i # – kJH: oC {0 X7 2 mZ d u@ (٦b:M {| ^ 0t @ * "w $ ! 0I [ n i ' ] iH g , | JR! hRh h ? R & L ߶ S v @ ׮ ׮ ׮ # ׮ Жt% hR t " + {u {ނ 0 K oy 9OT WywkAͯ F 6 * [ U

¡Creo que es el file, pero no puedo downloadlo!

¿Alguna ayuda, por favor?

¡Gracias!

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

  • Publique datos JSON en el server y reciba un file Excel.
  • Ese file de Excel se crea sobre la marcha y se devuelve como respuesta al cliente

      $("#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(result)); }); 

El fragment de arriba solo está haciendo lo siguiente

  • Publicación de una matriz como JSON en el server utilizando XMLHttpRequest
  • Después de search contenido como un blob (binary), estamos creando una URL descargable y adjuntándola al enlace "a" invisible y luego haciendo clic en él.

Aquí tenemos que establecer cuidadosamente algunas cosas en el lado del server. Establecí algunos encabezados en Python Django HttpResponse. Debe configurarlos como corresponda si usa otros lenguajes de progtwigción.

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

Desde que descargué xls (excel) aquí, ajusté contentType al anterior. Debe configurarlo de acuerdo con su tipo de file.

Intenta usar un formulario oculto para enviar la request.

Cuando un usuario envía un formulario HTML, todos los datos ingresados ​​en el formulario por el usuario se envían como una request GET o POST a la URL especificada en el atributo "ACCIÓN" de FORMULARIO.

  <FORM action="http://www.labnol.org/sendmail.php" method="post"> ...form contents... </FORM> 

En el ejemplo anterior, se emite una request HTTP POST al script sendmail.php en el envío del formulario. Puede agregar target = "_ blank" a la label FORM para procesar la request en una nueva window.

Sin embargo, si desea enviar un FORMULARIO en la página en segundo plano sin dirigir el browser a otra página (cambios en document.location.href al enviar el formulario), tiene dos opciones:

Opción 1. Puede crear un IFRAME invisible dentro de su página HTML y establecerlo como un objective para el FORMULARIO original. Esto enviará el formulario pero sin volver a cargar la window principal.

 <FORM action="http://example.com/script.php" method="POST" target="hidden-form"> ...form contents... </FORM> <IFRAME style="display:none" name="hidden-form"></IFRAME> 

Opción n.º 2: hay otro método que le permite crear cargas útiles personalizadas antes de enviar el formulario. A diferencia del envío de formulario basado en IFRAME, el siguiente código realiza una request de envío de formulario estándar y, por lo tanto, la location de su browser cambiará y la página actual se agregará al historial del browser. Crédito: Rakesh Pai.

 submitFORM('http://example.com/script.php', 'POST', {'name':'digital+inspiration', 'age':'100', 'sex','M'}); function submitFORM(path, params, method) { method = method || "post"; var form = document.createElement("form"); form.setAttribute("method", method); form.setAttribute("action", path); //Move the submit function to another variable //so that it doesn't get overwritten. form._submit_function_ = form.submit; for(var key in params) { if(params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("type", "hidden"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form._submit_function_(); } 

En este enlace puede encontrar la forma de crear un formulario oculto y enviarlo.

¡¡disfrutar!!

Si solo quieres download un file, no necesitas usar ajax para hacerlo. En realidad, no puedes download files usando ajax.
Todavía puede hacerlo haciendo una request de hyperlink <a href="your_link">Export</a> a una página de server que responda content-type es application/vnd.ms-excel y content-disposition es un attachment .

 $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: yoururlpath, success: function (response) { var file = fileName+".xlsx"; window.location = "someFilePath?file=" + file; } }); 

Puede lograr esto usando un iFrame también. Una function de muestra:

 // append the data to URL var requestData = { param1 : "value1", param2 : "value2", } // call the function downloadFile(<your_URL>, requestData); function downloadFile(requestURL, data) { // "transData" is just a user defined variable to encapsulate "downloadIFrame". It can be named anything as requinetworking. var downloadIFrame = window.transData.downloadIFrame = window.transData.downloadIFrame || $("#downloadFileiFrame"); downloadIFrame.attr("src", requestURL + $.param(requestData)); } // define the iFrame in your HTML and hide it. <iframe id="downloadFileiFrame" style="display:none;"></iframe>"