需要幫助獲得AJAX呼叫以下載文件

Question

因此，我正在一個網站頁面上工作，用戶在其中選擇一些元素來做出特定報告。 然后，我讓他們單擊一個按鈕，該按鈕將進行ajax調用。 此調用（正確）調用了控制器中基於參數創建.csv文件的方法。

但是，最困難的部分是，在創建此文件之后，我希望用戶以通常的方式將其下載-帶有整個彈出窗口，並將其放入下載文件夾中。

我發現這個堆棧溢出問題或多或少在影響着我現在的工作。 除非它是在ASP.NET Core之前編寫的，而且實際上不能與我的代碼一起使用。 現在是我的代碼：

<div class="mybutton">
    <button type="button" class="btn btn-info" style="background-color:#587992" id="CreateExcel" onclick="CreateFile()"> Create an Excel File for this Data </button>
</div>

...

<script>
...

function CreateFile(){
   array = getParameters();
    $.ajax({
            type: "POST",

            data: { 'array': array },
            cache: false,
            traditional: true,

            url: '@Url.Action("CreateCsvFile")',
            success: function (data) {
                if (data) {
                    var element = data;
                    window.location = 'Download?fileGuid=' + element.FileGuid 
                           + '&filename=' + element.FileName;
                }
            }
        });
    }
</script>

然后是我的控制器代碼：

public ActionResult CreateCsvFile(string[] array)
        {
            List<OperatorInterventions> TempList = new List<OperatorInterventions>();

            //Logic to apply the List to the passed in parameters in this line...

            var memoryStream = new MemoryStream();
            using (var writer = new StreamWriter(memoryStream, Encoding.UTF8, 1024, true))

            using (var csv = new CsvWriter(writer))
            {
                csv.WriteRecords(TempList);

            }
            string handle = Guid.NewGuid().ToString();
            memoryStream.Position = 0;
            TempData[handle] = memoryStream.ToArray();

            //return File(memoryStream, "text/csv", "clients.csv");
            return new JsonResult(new { FileGuid = handle, FileName = "newreport.csv" });


        }


        [HttpGet]
        public virtual ActionResult Download(string fileGuid, string fileName)
        {
            if (TempData[fileGuid] != null)
            {
                byte[] data = TempData[fileGuid] as byte[];
                return File(data, "text/csv", fileName);
            }
            else
            {
                // Problem - Log the error, generate a blank file,
                //           redirect to another controller action - whatever fits with your application
                return new EmptyResult();
            }
        }

現在，當我從Ajax調用返回到CreateCsvFile時，我嘗試處理數據。 當我逐步執行該調用時，我可以看到數據/元素包含類似於"{"fileGuid":"0123","fileName":"newreport.csv"}" ，但是在window.location使用的URL調用中，它的element.FileGuid和element.FileName最終被“未定義”。 我以前在那里有JSON.parse(data) ，但是這引起了一個錯誤，而JSON.stringify(data)什么也沒做。

另外，我懷疑即使我設法在URL中沒有未定義fileGuid和fileName，我也不完全確定它是否最終將調用Download文件。

有沒有辦法解決未定義的問題？ 總的來說，有沒有更好的方法來執行此Ajax調用下載？

謝謝

Answer 1

由於您可以在ajax成功中使用console.log(element)看到數據為{"fileGuid":"0123","fileName":"newreport.csv"} ，因此，您還需要使用相同的鍵element.fileGuid而不是element.FileGuid ：

success: function (data) {            
            if (data) {
                var element = data;
                console.log(element);
                window.location = 'Download?fileGuid=' + element.fileGuid
                       + '&fileName=' + element.fileName;
            }
        }