使用 webApi 和 angularjs 的间接下载链接

Posted 2023-04-12

【中文标题】使用 webApi 和 angularjs 的间接下载链接

【英文标题】：indirect download link using webApi and angularjs

【发布时间】：2020-06-29 01:34:52

【问题描述】：

我使用 Web Api (C#) 使用以下代码创建间接下载链接：

WebApi 代码：

var file = new FileStream(filePath, FileMode.Open, FileAccess.Read);
var httpResponseMessage = new HttpResponseMessage
  
    StatusCode = HttpStatusCode.OK,
    Content = new StreamContent(file)
  ;
httpResponseMessage.Content.Headers.Add("x-filename", fileName);
httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
httpResponseMessage.Content.Headers.ContentDisposition = 
           new ContentDispositionHeaderValue("attachment")  FileName = fileName ;
return httpResponseMessage;

AngularJs 代码：

var response = mainService.DownloadFile('api/download/file?id=1'); // $http get
response.then(function (resp) 
                        // Do Nothing                      
, function (err) 
        console.log(err.message);
);

当系统上安装下载管理器（类似 IDM）时，一切正常。

但没有下载管理器浏览器不显示下载对话框。在 Chrome 和 FireFox 中都没有

我在检查元素中检查了网络选项卡。我的请求返回了 200 个 http 代码和收到的数据，但浏览器没有显示任何开始下载的对话框。

你能帮帮我吗？

【参考方案1】：

您可以使用angular-file-saver。

 response.then(function (resp) 
      var data = new Blob([resp],  type: 'text/plain;charset=utf-8' );
      FileSaver.saveAs(data, 'filename');                    
    , function (err) 
            console.log(err.message);
    )

angular
  .module('fileSaverExample', ['ngFileSaver'])
  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);