Загрузить файл через jquery ajax post

Question

Я пытаюсь экспортировать данные своей веб-страницы и загружать ее как файл excel. но загрузка не начинается даже с возвратом ответа.

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

responseText что-то вроде этого:

PKJ; FxL/тема/theme1.xmlYOo6 , [р-н; В.И. # - kJH: oC {0 X7�2 mZ ���d��u@�(٦b:M���� {| ^0t @ * "w $ ! 0I [ n i ' iH g , | J ! hRh h ? R & L ߶ S v @ # ׮ " } Жt% hR t " + u {ނ 0 K oy 9OTWywkAͯ F 6 * [ U

Я думаю, что его файл, но я не могу загрузить его !!

Любая помощь, пожалуйста?

Спасибо!

Answer 1

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

Answer 2

Вы можете достичь этого, используя iFrame. Функция выборки:

// 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 required. 
    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>" 

Answer 3

Если вы просто хотите скачать файл, вам не нужно использовать ajax для этого. Фактически, вы не можете скачать файл с помощью ajax.
Вы все еще можете сделать это, сделав гиперссылку <a href="your_link">Export</a>. Обратитесь к серверной странице, чтобы ответы content-type были application/vnd.ms-excel и content-disposition is attachment.

Answer 4

Пробуйте использовать скрытую форму для отправки запроса.

Когда пользователь отправляет HTML-форму, все данные, введенные пользователем в форму, отправляются как запрос GET или POST по URL-адресу, указанному в атрибуте «ACTION» FORM.

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

В приведенном выше примере HTTP-запрос POST выдается скрипту sendmail.php при отправке формы. Вы можете добавить target = "_ blank" в тег FORM для обработки запроса в новом окне.

Однако, если вы хотели бы отправить форму на странице в фоновом режиме, не направляя браузер на другую страницу (document.location.href изменения по форме представляет), у вас есть два варианта:

Вариант # 1. Вы можете создать невидимый IFRAME внутри своей HTML-страницы и установить это как цель для оригинальной ФОРМЫ. Это приведет к отправке формы, но без перезагрузки родительского окна.

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

Вариант № 2: существует другой способ, который позволяет создавать пользовательские полезные данные перед отправкой формы. В отличие от представления формы на основе IFRAME, следующий код делает стандартный запрос на отправку формы, и поэтому ваше местоположение браузера изменится, и текущая страница будет добавлена ​​в историю браузера. Кредит: Ракеш Пай.

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_(); 
} 

В this ссылке вы можете найти способ создать скрытую форму и представить его.

наслаждаться !!

Answer 5

Я столкнулся с той же проблемой и успешно ее разрешил. Это мой случай использования.

• Опубликовать данные JSON на сервер и получить файл Excel.

• Это первенствует файл создается на лету и возвращается в качестве ответа на клиента

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

выше фрагмент просто делает следующее

• проводки массив как JSON на сервер используя XMLHttpRequest
• После извлечения содержимого в виде blob (двоичного) мы создаем загружаемый URL-адрес и прикрепляем его к невидимой ссылке «a», а затем щелкаем по ней.

Здесь мы должны тщательно установить несколько вещей на стороне сервера. Я установил несколько заголовков в Python Django HttpResponse. Вы должны установить их соответствующим образом, если используете другие языки программирования.

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

Поскольку я загружаю xls (excel) здесь, я скорректировал contentType выше одного. Вам нужно установить его в соответствии с типом файла.