使用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
函数-可能是一种安全功能,但更可能是一个缺陷,因此使用var saveBlob = navigator.msSaveBlob || navigator.webkitSaveBlob...等等
来确定可用的saveBlob
支持会导致异常;因此,下面的代码现在单独测试navigator.msSaveBlob
。感谢微软公司
$scope.downloadFile = function(httpPath) {
$http.get(httpPath, { responseType: 'arraybuffer' })
.success( function(data, status, headers) {
var octetStreamMime = 'application/octet-stream';
var success = false;
headers = headers();
var filename = headers['x-filename'] || 'download.bin';
var contentType = headers['content-type'] || octetStreamMime;
try
{
console.log("Trying saveBlob method ...");
var blob = new Blob([data], { type: contentType });
if(navigator.msSaveBlob)
navigator.msSaveBlob(blob, filename);
else {
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)
{
var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(urlCreator)
{
var link = document.createElement('a');
if('download' in link)
{
try
{
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);
link.setAttribute("download", filename);
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)
{
try
{
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)
{
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);
$scope.errorDetails = "Request failed with status: " + status;
});
};
##用法:
var downloadPath = "/files/instructions.pdf";
$scope.downloadFile(downloadPath);
###注意事项:
您需要修改您的WebApi方法,以返回以下标头:
希望对您有所帮助。