如何使用AngularJS下载文件并调用MVC API？

我正在使用AngularJS，我有一个MVC 4 API，返回一个附件的HttpResponseMessage。

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; 

我正在使用一个称为fileDownload …的jQuery插件，它精美地下载了文件…但是我还没有find以“Angular”的方式来做这件事的方法…任何帮助将不胜感激。

// _e

Answer 1

我有同样的问题。 通过使用名为FileSaver的JavaScript库解决了它

打电话

 saveAs(file, 'filename'); 

完整的http post请求：

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

Answer 2

在这里，你有API的angularjs http请求，任何客户端将不得不做。 只是适应WSurl和参数（如果你有）你的情况。 这是Naoe的答案和这个答案的混合：

 $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(); }).error(function(data, status, headers, config) { //TODO when WS error }); 

代码解释：

1. Angularjs在指定的URL处请求PDF。
2. 收到的答复是成功的
3. 我们在前端使用JavaScript执行一个技巧：
   • 创build一个html <a>标签。
   • 单击超链接<a>标记，使用JS click()函数

Answer 3

每个post…你不能通过XHR触发下载。 我需要实现下载的条件，所以，我的解决scheme是：

 //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); } }); 

我希望不知何故，或者有一天下载可以使用XHR触发，以避免第二个电话。 // _e

Answer 4

在angularjs中有两种方法

1）直接redirect到您的服务电话

 <a href="some/path/to/the/file">clickme</a> 

2）通过提交隐藏表格。

 $scope.saveAsPDF = function() { var form = document.createElement("form"); form.setAttribute("action", "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(); } 

当你不得不张贴一些元素时使用隐藏的元素

 <button ng-click="saveAsPDF()">Save As PDF</button> 

Answer 5

tremendows的解决scheme为我工作得很好。 但是，文件没有得到保存在Internet Explorer 10 +也。 下面的代码为我工作的IE浏览器。

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

Answer 6

另一个例子使用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); } 

Answer 7

 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; 

Answer 8

这就是我解决这个问题的方法

 $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" } 

Answer 9

使用FileSaver.js解决了我的问题，感谢您的帮助，下面的代码帮助了我

 '$' 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'); }); }