使用AngularJS从ASP.NET Web API方法下载文件

在我的Angular JS项目中,我有一个<a>锚点标记,点击时它会向返回文件的WebAPI方法发出HTTP GET请求。

现在,一旦请求成功,我希望文件被下载到用户。 我怎么做?

锚标签:

 <a href="#" ng-click="getthefile()">Download img</a> 

AngularJS:

 $scope.getthefile = function () { $http({ method: 'GET', cache: false, url: $scope.appPath + 'CourseRegConfirm/getfile', headers: { 'Content-Type': 'application/json; charset=utf-8' } }).success(function (data, status) { console.log(data); // Displays text data if the file is a text file, binary if it's an image // What should I write here to download the file I receive from the WebAPI method? }).error(function (data, status) { // ... }); } 

我的WebAPI方法:

 [Authorize] [Route("getfile")] public HttpResponseMessage GetTestFile() { HttpResponseMessage result = null; var localFilePath = HttpContext.Current.Server.MapPath("~/timetable.jpg"); if (!File.Exists(localFilePath)) { result = Request.CreateResponse(HttpStatusCode.Gone); } else { // Serve the file to the client result = Request.CreateResponse(HttpStatusCode.OK); result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read)); result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment"); result.Content.Headers.ContentDisposition.FileName = "SampleImg"; } return result; } 

支持使用ajax下载二进制文件并不是很好, 作为工作草稿还是很大的。

简单的下载方法:

您可以让浏览器简单地使用下面的代码下载请求的文件,这在所有浏览器中都是支持的,并且显然会触发WebApi请求。

 $scope.downloadFile = function(downloadPath) { window.open(downloadPath, '_blank', ''); } 

Ajax二进制下载方法:

使用Ajax下载二进制文件可以在一些浏览器中完成,下面是一个实现,将在最新的Chrome,Internet Explorer,FireFox和Safari的工作。

它使用一个arraybuffer响应types,然后将其转换为JavaScript blob ,然后使用saveBlob方法(尽pipe目前仅存在于Internet Explorer中)保存,或者转换为blob数据URL浏览器,如果在浏览器中支持MIMEtypes,则触发下载对话框。

Internet Explorer 11支持(固定)

注意:Internet Explorer 11不喜欢使用msSaveBlob函数(如果它是别名) – 可能是安全性function,但更可能是缺陷,因此使用var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc. var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ... etc.来确定可用的saveBlob支持引起的exception; 为什么下面的代码现在单独testingnavigator.msSaveBlob 谢谢? 微软

 // Based on an implementation here: web.student.tuwien.ac.at/~e0427417/jsdownload.html $scope.downloadFile = function(httpPath) { // Use an arraybuffer $http.get(httpPath, { responseType: 'arraybuffer' }) .success( function(data, status, headers) { var octetStreamMime = 'application/octet-stream'; var success = false; // Get the headers headers = headers(); // Get the filename from the x-filename header or default to "download.bin" var filename = headers['x-filename'] || 'download.bin'; // Determine the content type from the header or default to "application/octet-stream" var contentType = headers['content-type'] || octetStreamMime; try { // Try using msSaveBlob if supported console.log("Trying saveBlob method ..."); var blob = new Blob([data], { type: contentType }); if(navigator.msSaveBlob) navigator.msSaveBlob(blob, filename); else { // Try using other saveBlob implementations, if available var saveBlob = navigator.webkitSaveBlob || navigator.mozSaveBlob || navigator.saveBlob; if(saveBlob === undefined) throw "Not supported"; saveBlob(blob, filename); } console.log("saveBlob succeeded"); success = true; } catch(ex) { console.log("saveBlob method failed with the following exception:"); console.log(ex); } if(!success) { // Get the blob url creator var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL; if(urlCreator) { // Try to use a download link var link = document.createElement('a'); if('download' in link) { // Try to simulate a click try { // Prepare a blob URL console.log("Trying download link method with simulated click ..."); var blob = new Blob([data], { type: contentType }); var url = urlCreator.createObjectURL(blob); link.setAttribute('href', url); // Set the download attribute (Supported in Chrome 14+ / Firefox 20+) link.setAttribute("download", filename); // Simulate clicking the download link var event = document.createEvent('MouseEvents'); event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); link.dispatchEvent(event); console.log("Download link method with simulated click succeeded"); success = true; } catch(ex) { console.log("Download link method with simulated click failed with the following exception:"); console.log(ex); } } if(!success) { // Fallback to window.location method try { // Prepare a blob URL // Use application/octet-stream when using window.location to force download console.log("Trying download link method with window.location ..."); var blob = new Blob([data], { type: octetStreamMime }); var url = urlCreator.createObjectURL(blob); window.location = url; console.log("Download link method with window.location succeeded"); success = true; } catch(ex) { console.log("Download link method with window.location failed with the following exception:"); console.log(ex); } } } } if(!success) { // Fallback to window.open method console.log("No methods worked for saving the arraybuffer, using last resort window.open"); window.open(httpPath, '_blank', ''); } }) .error(function(data, status) { console.log("Request failed with status: " + status); // Optionally write the error out to scope $scope.errorDetails = "Request failed with status: " + status; }); }; 

用法:

 var downloadPath = "/files/instructions.pdf"; $scope.downloadFile(downloadPath); 

笔记:

你应该修改你的WebApi方法来返回下面的头文件:

  • 我已经使用了x-filename头来发送文件名。 这是一个自定义的头文件,但是可以使用正则expression式从content-disposition头文件中提取文件名。

  • 您也应该为您的响应设置content-type MIME头,以便浏览器知道数据格式。

我希望这有帮助。

对我来说,Web API是Rails和客户端Angular与Restangular和FileSaver.js一起使用的

Web API

 module Api module V1 class DownloadsController < BaseController def show @download = Download.find(params[:id]) send_data @download.blob_data end end end end 

HTML

  <a ng-click="download('foo')">download presentation</a> 

angular度控制器

  $scope.download = function(type) { return Download.get(type); }; 

有angular度的服务

 'use strict'; app.service('Download', function Download(Restangular) { this.get = function(id) { return Restangular.one('api/v1/downloads', id).withHttpConfig({responseType: 'arraybuffer'}).get().then(function(data){ console.log(data) var blob = new Blob([data], { type: "application/pdf" }); //saveAs provided by FileSaver.js saveAs(blob, id + '.pdf'); }) } }); 

C#WebApi PDF下载全部使用Angular JS身份validation

Web Api控制器

 [HttpGet] [Authorize] [Route("OpenFile/{QRFileId}")] public HttpResponseMessage OpenFile(int QRFileId) { QRFileRepository _repo = new QRFileRepository(); var QRFile = _repo.GetQRFileById(QRFileId); if (QRFile == null) return new HttpResponseMessage(HttpStatusCode.BadRequest); string path = ConfigurationManager.AppSettings["QRFolder"] + + QRFile.QRId + @"\" + QRFile.FileName; if (!File.Exists(path)) return new HttpResponseMessage(HttpStatusCode.BadRequest); HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK); //response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read)); Byte[] bytes = File.ReadAllBytes(path); //String file = Convert.ToBase64String(bytes); response.Content = new ByteArrayContent(bytes); response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf"); response.Content.Headers.ContentDisposition.FileName = QRFile.FileName; return response; } 

Angular JS服务

 this.getPDF = function (apiUrl) { var headers = {}; headers.Authorization = 'Bearer ' + sessionStorage.tokenKey; var deferred = $q.defer(); $http.get( hostApiUrl + apiUrl, { responseType: 'arraybuffer', headers: headers }) .success(function (result, status, headers) { deferred.resolve(result);; }) .error(function (data, status) { console.log("Request failed with status: " + status); }); return deferred.promise; } this.getPDF2 = function (apiUrl) { var promise = $http({ method: 'GET', url: hostApiUrl + apiUrl, headers: { 'Authorization': 'Bearer ' + sessionStorage.tokenKey }, responseType: 'arraybuffer' }); promise.success(function (data) { return data; }).error(function (data, status) { console.log("Request failed with status: " + status); }); return promise; } 

任何一个都可以

angularJS控制器调用服务

 vm.open3 = function () { var downloadedData = crudService.getPDF('ClientQRDetails/openfile/29'); downloadedData.then(function (result) { var file = new Blob([result], { type: 'application/pdf;base64' }); var fileURL = window.URL.createObjectURL(file); var seconds = new Date().getTime() / 1000; var fileName = "cert" + parseInt(seconds) + ".pdf"; var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = fileURL; a.download = fileName; a.click(); }); }; 

最后是HTML页面

 <a class="btn btn-primary" ng-click="vm.open3()">FILE Http with crud service (3 getPDF)</a> 

这将被重构只是分享代码,现在希望它可以帮助别人,因为它花了我一段时间才能得到这个工作。

我们还必须开发一个解决scheme,甚至可以与需要身份validation的API一起工作(请参阅本文 )

简单地使用AngularJS这里是我们如何做到的:

第1步:创build一个专用的指令

 // jQuery needed, uses Bootstrap classes, adjust the path of templateUrl app.directive('pdfDownload', function() { return { restrict: 'E', templateUrl: '/path/to/pdfDownload.tpl.html', scope: true, link: function(scope, element, attr) { var anchor = element.children()[0]; // When the download starts, disable the link scope.$on('download-start', function() { $(anchor).attr('disabled', 'disabled'); }); // When the download finishes, attach the data to the link. Enable the link and change its appearance. scope.$on('downloaded', function(event, data) { $(anchor).attr({ href: 'data:application/pdf;base64,' + data, download: attr.filename }) .removeAttr('disabled') .text('Save') .removeClass('btn-primary') .addClass('btn-success'); // Also overwrite the download pdf function to do nothing. scope.downloadPdf = function() { }; }); }, controller: ['$scope', '$attrs', '$http', function($scope, $attrs, $http) { $scope.downloadPdf = function() { $scope.$emit('download-start'); $http.get($attrs.url).then(function(response) { $scope.$emit('downloaded', response.data); }); }; }] }); 

第2步:创build一个模板

 <a href="" class="btn btn-primary" ng-click="downloadPdf()">Download</a> 

第3步:使用它

 <pdf-download url="/some/path/to/a.pdf" filename="my-awesome-pdf"></pdf-download> 

这将呈现一个蓝色的button。 点击后,将下载PDF(注意:后端必须以Base64编码forms提供PDF)并放入href中。 该button变成绿色,并将文本切换为保存 。 用户可以再次点击,并会显示文件my-awesome.pdf的标准下载文件对话框。

以base64string发送您的文件。

  var element = angular.element('<a/>'); element.attr({ href: 'data:attachment/csv;charset=utf-8,' + encodeURI(atob(response.payload)), target: '_blank', download: fname })[0].click(); 

如果attr方法在Firefox中不起作用您还可以使用javaScript的setAttribute方法

你可以实现一个showfile函数,该函数接受从WEBApi返回的数据的参数,以及要下载的文件的文件名。 我所做的是创build一个单独的浏览器服务标识用户的浏览器,然后处理基于浏览器的文件的呈现。 例如,如果目标浏览器是iPad上的Chrome浏览器,则必须使用JavaScripts FileReader对象。

 FileService.showFile = function (data, fileName) { var blob = new Blob([data], { type: 'application/pdf' }); if (BrowserService.isIE()) { window.navigator.msSaveOrOpenBlob(blob, fileName); } else if (BrowserService.isChromeIos()) { loadFileBlobFileReader(window, blob, fileName); } else if (BrowserService.isIOS() || BrowserService.isAndroid()) { var url = URL.createObjectURL(blob); window.location.href = url; window.document.title = fileName; } else { var url = URL.createObjectURL(blob); loadReportBrowser(url, window,fileName); } } function loadFileBrowser(url, window, fileName) { var iframe = window.document.createElement('iframe'); iframe.src = url iframe.width = '100%'; iframe.height = '100%'; iframe.style.border = 'none'; window.document.title = fileName; window.document.body.appendChild(iframe) window.document.body.style.margin = 0; } function loadFileBlobFileReader(window, blob,fileName) { var reader = new FileReader(); reader.onload = function (e) { var bdata = btoa(reader.result); var datauri = 'data:application/pdf;base64,' + bdata; window.location.href = datauri; window.document.title = fileName; } reader.readAsBinaryString(blob); }