栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

使用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标头,以便浏览器知道数据格式。

我希望这有帮助。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/433017.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号