使用ajax对下载二进制文件的支持不是很好,它仍在作为工作草案进行开发。
简单的下载方法:
您可以使用以下代码简单地让浏览器下载所请求的文件,并且所有浏览器都支持此功能,并且显然会触发WebApi请求。
$scope.downloadFile = function(downloadPath) { window.open(downloadPath, '_blank', ''); }Ajax二进制下载方法:
使用ajax下载二进制文件可以在某些浏览器中完成,下面是一个可以在最新版本的Chrome,Internet
Explorer,FireFox和Safari中运行的实现。
它使用
arraybuffer响应类型,然后将其转换为Javascript
blob,然后使用该
saveBlob方法将其呈现为保存-
尽管当前仅在Internet Explorer中存在-或转换为由浏览器打开的Blob数据URL,从而触发如果支持在浏览器中查看MIME类型,则下载对话框。
Internet Explorer 11支持(已修复)
注意:Internet Explorer 11不喜欢使用msSaveBlob
已别名的功能-也许是安全功能,但更可能是漏洞,因此使用varsaveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob ...etc.
确定可用的saveBlob
支持会导致异常。因此,为什么下面的代码现在分别进行测试navigator.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
标题发送文件名。为了方便起见,这是一个自定义标头,但是您可以content-disposition
使用正则表达式从标头中提取文件名。您还应该
content-type
为响应设置mime标头,以便浏览器知道数据格式。
我希望这有帮助。



