2017-07-24 52 views
0

因此,我使用PDF Sharp生成並保存在我的App_Data文件夾中的pdf。當用戶單擊我的控制器上的按鈕時,我希望用戶能夠下載該文件。從web api控制器向角js提供文件

我設法讓它工作(有點),因爲用戶可以下載文件,但是當他們打開這個pdf文件時,文檔是空白的,看起來幾乎是文件大小的兩倍原始文件保存在我的App_Data文件夾中。我不確定發生了什麼問題,但只能猜測這與我如何讀取文件和流式傳輸數據有關。

反正這是Web API控制器功能:

[HttpGet] 
public HttpResponseMessage DownloadPdf(int itemId) 
{ 
    var item = _myService.GetItem(itemId); 
    var result = Request.CreateResponse(HttpStatusCode.OK); 

    result.Content = new StreamContent(File.ReadAllBytes(HostingEnvironment.MapPath(item.ReportFilePath))); 
    result.Content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/pdf"); 
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); 
    result.Content.Headers.ContentDisposition.FileName = Path.GetFileName(HostingEnvironment.MapPath(item.ReportFilePath)); 

    return result; 
} 

,這是我的角度控制器上的相關功能(注意businessResource呼叫只是通過$ HTTP調用的數據路由到我的web api函數) :

$scope.downloadPdf = function() { 
    businessResource.downloadPdf($scope.itemId).then(function (response) { 
     var headers = response.headers; 
     var filename; 
     var disposition = headers('Content-Disposition'); 
     if (disposition && disposition.indexOf('attachment') !== -1) { 
      var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; 
      var matches = filenameRegex.exec(disposition); 
      if (matches != null && matches[1]) { 
       filename = matches[1].replace(/['"]/g, ''); 
      } 
     } 

     // Get the blob url creator 
     var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL; 
       if (urlCreator) { 
        var link = document.createElement('a'); 

        if ('download' in link) { 

         // Prepare a blob URL 
         var blob = new Blob([response.data], { type: headers('content-type') }); 
         var url = urlCreator.createObjectURL(blob); 
         link.setAttribute('href', url); 
         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); 

        } 
       } 
      }, function (response) { 
       notificationsService.error("Error", "Could not generate report"); 
      }); 
     } 

所以我只想澄清:呼叫在這個意義上的工作,我得到一個PDF文件下載,但該文件沒有包含任何內容,當我在瀏覽器/ PDF閱讀器中打開它,幾乎是是我存儲的原始文件大小的兩倍App_Data文件夾。

我不知道數據在哪裏被破壞..任何想法?

回答

0

想通了:

return $http.get('<end point url>); 

到:

的$ http.get這是使得調用所需的網絡API來改變

return $http.get('<end point url>', { responseType: 'arraybuffer' }); 

即。 responseType需要設置爲'arraybuffer'。希望這可以幫助別人!