2016-12-09 21 views
2

这是我用于返回带有多个图像的PDF的API。现在,当我使用url调用它时,它完美地下载了带有图像的PDF。例如,两个页面的图像。Blob和WebAPI的角度FileSaver。下载的PDF为空白。但API网址返回带有内容的PDF

[HttpGet] 

    public async Task<IHttpActionResult> Download(Guid customDocId) 
    { 

        byte[] responseContent = await Task.FromResult(FileNetApiClientFactory.Get(customDocId).DownloadDocument(customDocId, "pdf", true)); 
        HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK) 
        { 
         Content = new ByteArrayContent(responseContent), 
         StatusCode = HttpStatusCode.OK, 
        }; 
        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = string.Concat(customDocId.ToString(), ".pdf") }; 
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf"); 
        return ResponseMessage(response); 

      } 

现在来自angular我使用blob和FileSaver来保存PDF。所以当我下载它。然后它只返回两页,但没有内容。但它显示页面1和页面2,但它们是空白的。

这里是我的角度代码:

//saveAs method is from FileSaver.js 
     vm.download = function() { 
      documentService.download($scope.customDocumentId).then(function (fileData) { 
       var blob = new Blob([fileData], { type: 'application/pdf' }); 
       saveAs(blob, $scope.customDocumentId + ".pdf"); 
      }).catch(function() { 

      }); 
     } 

,服务:

function _download(customDocumentId) { 
      return Restangular 
       .one('customdocument', customDocumentId).one('download') 
       .get(null, { responseType: 'arraybuffer' }); 
     } 

有没有人有任何想法,为什么它返回空白页时FileSaver保存,而直接下载对所有内容都完美无瑕。

回答

1

我不得不改变在Restangular某些事情。这是responseType必须是arrayBuffer或“blob”。我没有明确尝试使用arrayBuffer。 blob响应类型为我工作。配置从restangular丢失。所以我对我的服务做了一些改变,瞧!它正在工作。

所以现在更新的Service看起来像这样。 DocumentServicesRestangular只不过是一个通过RestangularConfigurer改变了baseurl的工厂包装器。

function _download(customDocumentId) { 
      return DocumentServicesRestangular.one('customdocument', customDocumentId).one('download') 
        .withHttpConfig({ responseType: 'blob' }).get(); 
     } 
0

如果您正在使用FileSaver那么这是正确的语法

var data = new Blob([response], { type: 'application/pdf;charset=utf-8' }); 
FileSaver.saveAs(data, filename); 
+0

didnt解决我的问题。它仍然返回PDF空白页:( – Joy

+0

也在我的应用程序FileSaver.saveAs()不存在。它唯一的saveAs()不知道为什么。我使用FileSaver.min.js – Joy

1

尝试这样,

$scope.download = function() { 
    var a = document.createElement("a"); 
    document.body.appendChild(a); 
    var requestParams=$scope.downloadObj; 
    a.style = "display: none"; 
    sServices.doAPIRequest(Url) 
     .then(function(generateData) { 

      var file = new Blob([$scope.base64ToArrayBuffer(generateData)], { 
       type : 'application/pdf' 
      }); 
      var fileName="Data"; 
      var fileURL = URL.createObjectURL(file); 
      a.href = fileURL; 
      a.download = fileName; 
      a.click(); 
     }); 
}; 

$scope.base64ToArrayBuffer=function(data) 
{ 
     var binaryString = window.atob(data); 
     var binaryLen = binaryString.length; 
     var bytes = new Uint8Array(binaryLen); 
     for (var i = 0; i < binaryLen; i++)  { 
      var ascii = binaryString.charCodeAt(i); 
      bytes[i] = ascii; 
     } 
     return bytes; 
}; 
+0

我不认为所有下载属性都是允许的浏览器?这就是为什么要避免这种方法 – Joy

0

我改变我的服务的$ http.get调用修复了这个问题,使响应类型是在配置参数设置:

return $http.get(apiTarget, { responseType: 'blob' });