使用Ajax MVC下載excel文件

Question

如何在MVC中使用Ajax下載文件。如果沒有數據生成文件，則顯示錯誤標籤。 我想使用返回文件的操作結果方法。我可以下載文件。但不想刷新頁面如果沒有文件下載。 我的代碼是這樣

public ActionResult Excel(MyViewModel model) 

{ 

    var result = // DB call to get data 

    if (no data) 
    { 
     return **something** 
    } 
    else 
    { 
   byte[] excelContent =//passing result to my method(returns xls file in byte) 

     return File(
                    excelContent, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
                    reportName + " Report " + startDate + " - " + endDate + ".xlsx"); 
    } 
} 

我應該返回東西 現在我回來emptyResult爲東西所以我如果沒有數據有空白頁。 Ajax不支持文件下載。 如果我提交表單並且有數據，則此代碼有效。 建議哪些頁面不會刷新，並且兩項任務都可以實現。 1.文件下載，如果數據 2.顯示錯誤的標籤，如果沒有數據

Answer 1

1. 如果使用Ajax的話，最好的方法來創建API獲取文件

2. 函數的返回類型爲FileResult

   var exportToExcel = function (inputData, fileName) { 
   var path = "url"; 
   var form = $("<form></form>"); 
   form.attr("enctype", "application/x-www-form-urlencoded"); 
   form.attr("method", "post"); 
   form.attr("action", path); 
   form.attr("accept-charset", "UTF-8"); 
   
   var field = $("<input></input>"); 
   field.attr("type", "hidden"); 
   field.attr("name", "data"); 
   field.attr("value", escape(JSON.stringify(inputData))); 
   
   form.append(field); 
   var field2 = $("<input></input>"); 
   
   field2.attr("name", "fileName"); 
   field2.attr("value", fileName); 
   form.append(field2); 
   $(document.body).append(form); 
   form.submit().remove(); 
   

   } ;

   變種downloadFile =函數（inputData）{// 是checkFileHasResult AJAX調用的結果，如果真或假 checkFileHasResult（inputData）。然後（函數（hasFile）{ 如果（hasFile ===真）{// 給文件名加分機號 exportToExcel（inputData，「asdfasdf.csv」）; } }）; };

Answer 2

做在谷歌快速搜索，帶來了相當多的成果，爲this問題。

在JQuery中，您可以將'window.location'指向控制器中的操作方法，即返回FileResult。這會爲你下載文件。

我建議您將消息返回給ajax調用，說明您的下載是否成功，然後您可以在前端設置某種文本以通知用戶此過程不成功。

這是我將如何完成這一點。你可以調整它爲你工作。這是一個控制器方法的例子。

[HttpGet] 
public JsonResult ExportCollection() 
{ 
    //Build your excel file, and save it to disk somewhere on server. 
    //you can also save it in session, depending on size 
    //Build up response Messages based on success or not 

    //return json object with your file path 
    return Json(new { responseMessage = responseMessage }, JsonRequestBehavior.AllowGet); 
} 

public ActionResult Download(string fileName) 
{ 
    return File(model.FilePath, "application/vnd.ms-excel", fileName); 
} 

然後，使用JQuery和Ajax調用從客戶端調用這些操作。

$(document).on("click", "#YourButton", function() { 
     var url = "/YourController/ExportCollection/" 

     $("#responseText").text("We're getting things ready. Please wait..."); 
     $('#loadingImage').show(); 

     $.ajax({ 
      url: url, 
      type: "get", 
      success: function (responseMessage) { 
       patientCollectionExportSuccess(responseMessage); 
      } 
     }); 
    }) 

//Function responsible for exporting 
function patientCollectionExportSuccess(dataReceived) { 
    var respMessage = dataReceived.responseMessage; 

    if (respMessage != null) { 
     if (respMessage != "Error: Not Exported.") { 

      $("#responseText").text("Download completed."); 
      $('#loadingImage').hide(); 

      //set window.location to redirect to FileResult, which will download file 
      window.location = '/PatientListingQuery/Download?fileName=' + respMessage ; 
     } 
     else { 
      $("#responseText").text("Download unsuccessful."); 
      $('#loadingImage').hide(); 

      $("#responseText").text(dataReceived.responseMessage); 
     } 

    } 
} 

Answer 3

謝謝你們

我得到了解決 它順利地爲我的作品....

我的表單動作指向另一種方法，提交表單之前，所以更新動作。並在文件下載後，我將其設置爲舊的表單操作。

$(document).ready(function() { 
    $('#excel-button').on('click', function() {    
     $.ajax({ 
      url: '/MyController/IsData', 
      type: 'POST', 
      data: $("#myForm").serialize(), 
      success: function (response) { 
       if (response == "True") { 
        var oldUrl=""; 
        var form1 = $('#myForm'); 

        var frm = document.getElementById('myForm') || null; 
        if (frm) { 
          oldUrl = frm.action; 
         frm.action = '/MyController/GenerateExcel'; 
        } 

        form1.submit(); 
        frm.action = oldUrl; 
        $('.error-Message').hide(); 

       }     else {       

        $('.error-Message').show(); 

       } 
      } 
    }); 
    });