como baixar o arquivo usando AngularJS e chamando API MVC?

Estou usando o AngularJS e tenho uma API do MVC 4 que retorna um HttpResponseMessage com um anexo.

var result = new MemoryStream(pdfStream, 0, pdfStream.Length) { Position = 0 }; var response = new HttpResponseMessage { StatusCode = HttpStatusCode.OK, Content = new StreamContent(result) }; response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "MyPdf.pdf" }; response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); return response; 

Eu estou usando um plugin jQuery chamado fileDownload … que baixar o arquivo lindamente … mas eu ainda não encontrei o caminho para fazer isso no modo “Angular” … qualquer ajuda será apreciada.

// _e

Eu tive o mesmo problema. Resolvido usando uma biblioteca javascript chamada FileSaver

Apenas ligue

 saveAs(file, 'filename'); 

Solicitação completa de postagem http:

 $http.post('apiUrl', myObject, { responseType: 'arraybuffer' }) .success(function(data) { var file = new Blob([data], { type: 'application/pdf' }); saveAs(file, 'filename.pdf'); }); 

Aqui você tem o pedido http angularjs para a API que qualquer cliente terá que fazer. Apenas adapte o URL do WS e params (se tiver) ao seu caso. É uma mistura entre a resposta de Naoe e esta :

 $http({ url: '/path/to/your/API', method: 'POST', params: {}, headers: { 'Content-type': 'application/pdf', }, responseType: 'arraybuffer' }).success(function (data, status, headers, config) { // TODO when WS success var file = new Blob([data], { type: 'application/csv' }); //trick to download store a file having its URL var fileURL = URL.createObjectURL(file); var a = document.createElement('a'); a.href = fileURL; a.target = '_blank'; a.download = 'yourfilename.pdf'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }).error(function (data, status, headers, config) { //TODO when WS error }); 

Explicação do código:

  1. Angularjs solicita um arquivo.pdf na URL: /path/to/your/API .
  2. Sucesso é recebido na resposta
  3. Nós executamos um truque com JavaScript no front-end:
    • Crie um link html ta: .
    • Clique na tag do hiperlink, usando a function click() do JS
  4. Remova a tag html , após seu clique.

por vários post … você não pode acionar um download via XHR. Eu precisava implementar condição para o download, então, minha solução foi:

 //make the call to the api with the ID to validate someResource.get( { id: someId }, function(data) { //confirm that the ID is validated if (data.isIdConfirmed) { //get the token from the validation and issue another call //to trigger the download window.open('someapi/print/:someId?token='+ data.token); } }); 

Eu desejo que de alguma forma, ou um dia o download possa ser acionado usando o XHR para evitar a segunda chamada. // _e

Existem 2 maneiras de fazer isso em angularjs ..

1) redirecionando diretamente para sua chamada de serviço.

 clickme 

2) Ao enviar o formulário oculto.

 $scope.saveAsPDF = function() { var form = document.createElement("form"); form.setAttribute("action", "https://stackoverflow.com/questions/14215049/how-to-download-file-using-angularjs-and-calling-mvc-api/some/path/to/the/file"); form.setAttribute("method", "get"); form.setAttribute("target", "_blank"); var hiddenEle1 = document.createElement("input"); hiddenEle1.setAttribute("type", "hidden"); hiddenEle1.setAttribute("name", "some"); hiddenEle1.setAttribute("value", value); form.append(hiddenEle1 ); form.submit(); } 

use o elemento oculto quando você tem que postar algum elemento

  

A solução por tremendows funcionou bem para mim. No entanto, o arquivo não estava sendo salvo no Internet Explorer 10 ou superior também. O código abaixo funcionou para mim para o navegador IE.

 var file = new Blob(([data]), { type: 'application/pdf' }); if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(file, 'fileName.pdf'); } 

Outro exemplo usando o código Blob() :

 function save(url, params, fileName){ $http.get(url, {params: params}).success(function(exporter) { var blob = new Blob([exporter], {type: "text/plain;charset=utf-8;"}); saveAs(blob, fileName); }).error(function(err) { console.log('err', err); }); }; // Save as Code function saveAs(blob, fileName){ var url = window.URL.createObjectURL(blob); var doc = document.createElement("a"); doc.href = url; doc.download = fileName; doc.click(); window.URL.revokeObjectURL(url); } 
 string trackPathTemp = track.trackPath; //The File Path var videoFilePath = HttpContext.Current.Server.MapPath("~/" + trackPathTemp); var stream = new FileStream(videoFilePath, FileMode.Open, FileAccess.Read); var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new StreamContent(stream) }; result.Content.Headers.ContentType = new MediaTypeHeaderValue("video/mp4"); result.Content.Headers.ContentRange = new ContentRangeHeaderValue(0, stream.Length); // result.Content.Headers.Add("filename", "Video.mp4"); result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "Video.mp4" }; return result; 

Foi assim que resolvi esse problema

 $scope.downloadPDF = function () { var link = document.createElement("a"); link.setAttribute("href", "path_to_pdf_file/pdf_filename.pdf"); link.setAttribute("download", "download_name.pdf"); document.body.appendChild(link); // Required for FF link.click(); // This will download the data file named "download_name.pdf" } 

usando FileSaver.js resolveu meu problema obrigado pela ajuda, código abaixo me ajudou

 '$' DownloadClaimForm: function (claim) { url = baseAddress + "DownLoadFile"; return $http.post(baseAddress + "DownLoadFile", claim, {responseType: 'arraybuffer' }) .success(function (data) { var file = new Blob([data], { type: 'application/pdf' }); saveAs(file, 'Claims.pdf'); }); } 

Há serviço angular escrito servidor de arquivos angular Usa FileSaver.js e Blob.js

  vm.download = function(text) { var data = new Blob([text], { type: 'text/plain;charset=utf-8' }); FileSaver.saveAs(data, 'text.txt'); };