javascript save файл из http-ответа (Web Api HttpResponseMessage)

Question

У меня проблема при попытке сохранить файл из ответа сервера.

Когда я пытаюсь загрузить файл с url в моем браузере, все работает, но когда я попытался отправить запрос со стороны клина, файл сохраняется, но в файле есть «[Object object]», и если это файл PDF файл не открывается.

Запрос должен содержать дополнительный заголовок, содержащий идентификатор ключа клиента.

Вот мой код сервера:

 [HttpGet, IsAllowed(4,PageAction.Download)] 
    public HttpResponseMessage Download(string id) 
    { 
     var path = HttpContext.Current.Server.MapPath("~") + string.Format(@"Files\{0}.doc",id); 
     var stream = new FileStream(path, FileMode.Open); 
     HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); 
     result.Content = new StreamContent(stream); 
     result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");    
     result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); 
     result.Content.Headers.ContentDisposition.FileName = string.Format("{0}.doc", id); 
     return result; 
    } 

А вот мой Клинт код:

function get() { 
    var defer = $q.defer(); 

    $http.post('http://localhost:4704/api/file/download/1', { responseType: 'arrayBuffer' }).then(
     function (data, status, headers, config) { 
      var results = { 
       data: data, 
       headers: data.headers(), 
       status: data.status, 
       config: data.config 
      }; 
      defer.resolve(results); 

     }, function (data, status, headers, config) { 
      defer.reject(data); 
     }); 
    return defer.promise; 
} 


$scope.download = function() { 

    get().then(function (response) { 
     var octetStreamMime = 'application/octet-stream'; 
     var fileName = "Test.doc"; 
     var contentType = response.headers["content-type"] || octetStreamMime; 
     try { 
      var blob = new Blob([response.data], { type: contentType }); 
      if (window.navigator && window.navigator.msSaveOrOpenBlob) { 
       window.navigator.msSaveOrOpenBlob(blob, fileName); 
      } else { 
       var objectUrl = URL.createObjectURL(blob); 
       window.open(objectUrl); 
      } 
     } catch (exc) { 
      console.log("Save Blob method failed with the following exception."); 
      console.log(exc); 
     } 

    }, function (error) { 

    }); 

Кроме того, я также попытался следующий код:

$http.get("http://localhost:4704/api/file/download").then(function (res) { 
     var anchor = angular.element('<a/>'); 
     anchor.attr({ 
      href: 'data:attachment/doc;charset=utf-8,', 
      target: '_blank', 
      download: 'test.doc' 
     })[0].click(); 
    }) 

Answer 1

код Сервер явно отправки двоичных данных в ответ на HTTP GET от клиента. В этом случае клиенту необходимо установить XHR на responseType: arraybuffer.

Пример HTML

<button ng-click="fetch()">Get file</button> 

<a download="{{filename}}" xd-href="data"> 
    <button>SaveAs {{filename}}</button> 
</a> 

HTML, создает две кнопки. Щелчок по первой кнопке получает файл с сервера. Вторая кнопка сохраняет файл.

xd-href Директива

app.directive("xdHref", function() { 
    return function linkFn (scope, elem, attrs) { 
    scope.$watch(attrs.xdHref, function(newVal) { 
     newVal && elem.attr("href", newVal); 
    }); 
    }; 
}); 

В директиве часы свойства объема, определенное с помощью атрибута xd-href и устанавливает атрибут к значению этой области видимости собственности href.

Контроллер

var url = "http://localhost:4704/api/file/download/1"; 
$scope.fetch = function() { 
    $http.get(url, {responseType: "arraybuffer"}) 
     .then (function (response) { 
     var disposition = response.headers("content-disposition"); 
     var filename = disposition.match(/filename="(\w*.\w*)"/)[1]; 
     $scope.filename = filename || "f.bin"; 
     $scope.data = new Blob([response.data]); 
    }).catch(function (error) { 
     console.log(error); 
     throw error; 
    }); 
}; 

Контроллер использует метод GET XHR для извлечения файла, извлекает имя файла из заголовка Content-Disposition и создает сгусток из данных ответов. Он устанавливает атрибут download тега <a> значению имени файла и атрибуту href значению blob. Нажав на кнопку <a>, браузер откроет диалоговое окно сохранения.

Answer 2

Если данные в формате json вы можете использовать это

href: 'data:text/plain;charset=utf-8,' + JSON.stringify(data) 

или вы можете также использовать для кодирования данных, попробуйте это

href: 'data:text/plain;charset=utf-8,' + encodeURIComponent(data)