從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'));