Загрузка файла с использованием jQuery ajax

Question

У меня есть сетка MVC, содержащая два столбца. DocumentName и кнопка, при нажатии на которую можно загрузить / открыть документ в браузере (меня устраивает любое решение). Вот так

Мой контроллер возвращает файл вот так

 public FileResult Render(string file)
 {
   return File(ConfigurationManager.AppSettings["DocumentFilePath"] + file, GetMime(Path.GetExtension(file)), Path.GetFileName(file));
 }

    [NonAction]
    private string GetMime(string extension)
    {
        string contentType = string.Empty;
        switch (extension.ToLower())
        {
            ...
            case ".png":
                contentType = "image/x-png";
                break;
            ...
        }
   }

На стороне клиента, когда нажимается кнопка, я вызываю функцию showDocument

 function showDocument(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    //dataItem.DocumentName holds the name of the document like Build Error_3E53...PNG

    $.ajax({
        url: '@Url.Action("Render", "Log")',
        data: {file: dataItem.DocumentName},
        success: function (document) {
            window.location = document;
        } 
    });
 }

Когда я нажимаю на кнопку, она выдает ошибку, но кажется, что она отправляет байты на консоль браузера

Пожалуйста, дайте мне знать что я должен сделать, чтобы решить проблему и загрузить / просмотреть файл.

Answer 1

Добавить dataType и responseType в ajax запрос:

$.ajax({
  url: '@Url.Action("Render", "Log")',
  dataType: 'binary',
  xhrFields: {
    responseType: 'blob'
  },
  success: function(blob){
    console.log(blob.size);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = "fileName" + ".fileExtension";
    link.click();
  }
});

Оформить заказ загрузка файла через ajax пример.