从AngularJS的.NET控制器下载PDF

Question

好吧，我已经阅读了关于从Web服务下载PDF的每个堆栈溢出问题。迄今为止，他们都没有帮助过我。我将此作为最后一次努力尝试并获得一些答案。基本上，我正在向API发出GET请求，并且需要返回动态生成的PDF。我们试图通过收到byte[]来做到这一点，现在我们正在返回包含内容的信息流。下面就是我们在Web服务控制器：

var result = await resp.Content.ReadAsAsync<byte[]>(); 
var response = request.CreateResponse(HttpStatusCode.OK); 
var dataStream = new MemoryStream(result); 
response.Content = new StreamContent(dataStream); 
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream"); 
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); 
response.Content.Headers.ContentDisposition.FileName = "idcard.pdf"; 

var fileStream = new FileStream(@"c:\temp\temp.pdf", FileMode.Create); 
fileStream.Write(result, 0, result.Length); 
fileStream.Close(); 

return response; 

通过FileStream的部分是我们在做，看看是否将数据保存到临时文件工作的测试和PDF格式保存即可。这部分工作。去c：\ temp并打开idcard.pdf文件完美。其中一个问题就是它默默无闻，用户不知道它在那里。我们可以告诉他们，但我们确实希望PDF在浏览器中默认打开并/或通过浏览器保存，以便他们知道发生了什么事情。

我的角度代码如下所示：

.factory('memberIdCard', ['$http', function($http) { 

var get = function() { 
    return $http({ 
     method: 'GET', 
     url: '/Member/IdCard', 
     headers: { 
      accept: 'application/octet-stream' 
     }, 
     responseType: 'arraybuffer', 
     transformResponse: function(data) { 
      var pdf; 
      console.log('data: ', data); 
      if (data) { 
       pdf = new Blob([data], { 
        type: 'application/pdf' 
       }); 
       console.log('pdf: ', pdf); 
      } 
      return pdf; 
     } 
    }) 
} 

return { 
    get: get 
} 
}]); 

我已经试过这部分与$http和$resource既不作品。现在，在我的控制器：

$scope.printIdCard = function() { 
memberIdCard.get().then(function(data) { 
    var pdf = data.data; 
    FileSaver.saveAs(pdf, 'idcard.pdf'); 

    var pdfUrl = window.URL.createObjectURL(pdf); 

    $scope.pdfView = $sce.trustAsResourceUrl(pdfUrl); 
    window.open($scope.pdfView); 

}); 

作为一个说明，FileSaver是angular-file-saver。

毕竟，打开新窗口，但出现如下错误：无法加载PDF文档，并且如果尝试在Adobe Acrobat中打开它，则会出现如下错误：Adobe Acrobat Reader DC无法打开'idcard.pdf'，因为它不是受支持的文件类型，或者是因为文件已损坏（例如，它是作为电子邮件附件发送的，未正确解码）。

任何帮助将不胜感激。我觉得我已经完成了许多其他SO问题中提出的一切，但也许我错过了一些我无法看到的东西。

谢谢！

Answer 1

我为.xlsx文件做了类似的事情，但概念是相同的。希望这可以帮助你，它为我工作。

我得到的JavaScript代码从另一个SO答案下载文件，我不能链接，因为我不记得它在哪里。

我的Web API控制器看起来是这样的：

[Route("all")] 
[HttpGet] 
public HttpResponseMessage GetAll(HttpRequestMessage request) 
{ 

HttpResponseMessage response = null; 

MemoryStream stream = _exportService.CreateDataStream(); 

response = request.CreateResponse(HttpStatusCode.OK); 

response.Content = new ByteArrayContent(stream.GetBuffer()); 
response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment"); 
response.Content.Headers.Add("content-type", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); 

return response; 


} 

和角服务：

(function (app) { 
 

 
    'use strict'; 
 

 
    app.factory('exportService', exportService); 
 

 
    exportService.$inject = ['$q', '$http']; 
 

 
    function exportService($q, $http) { 
 

 
    var extension = '.xlsx'; 
 

 
    var service = { 
 
     export: exportData 
 
    }; 
 

 
    function exportData(event, fname){ 
 

 
     var config = { 
 
      responseType: 'arraybuffer' 
 
     } 
 

 
     var path = 'api/export/'+event; 
 

 
     var deferred = $q.defer(); 
 

 
     return $http.get(path, config).then(
 
      function(response) { 
 

 
       var data = response.data; 
 
       var status = response.status; 
 
       var headers = response.headers(); 
 

 
       var octetStreamMime = 'application/octet-stream'; 
 
       var success = false; 
 

 
       var filename = fname + extension; 
 

 
       var contentType = headers['content-type'] || octetStreamMime; 
 

 
       try 
 
       { 
 
        // Try using msSaveBlob if supported 
 
        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); 
 
        } 
 
        success = true; 
 
        deferred.resolve(); 
 
       } catch(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 
 
           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); 
 
           success = true; 
 
           deferred.resolve(); 
 
          } catch(ex) { 
 
          } 
 
         } 
 

 
         if(!success) 
 
         { 
 
          // Fallback to window.location method 
 
          try 
 
          { 
 
           var blob = new Blob([data], { type: octetStreamMime }); 
 
           var url = urlCreator.createObjectURL(blob); 
 
           window.location = url; 
 
           success = true; 
 
           deferred.resolve(); 
 
          } catch(ex) { 
 
           deferred.reject(); 
 
          } 
 
         } 
 

 
        } 
 
       } 
 
       return deferred.promise; 
 
      }, 
 
      function(error) { 
 
       return $q.reject(error); 
 
      }); 
 
    } 
 

 
    return service; 
 
    } 
 

 
})(angular.module('core.module'));