带有斑点和WebAPI的Angular Filesaver.下载的PDF是空白的.但是API URL返回使用内容的PDF

Question

这是我返回具有多个图像的PDF的API。现在，当我使用URL调用此功能时，它可以完美地使用图像下载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 I正在使用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' });
}

有人知道为什么用文件保存保存时会返回空白页，而直接下载的所有内容都很好。

Answer 1

我必须在Restangular中更改某些内容。responseType必须是arrayBuffer或" Blob"。我没有明确尝试使用ArrayBuffer。Blob ResponseType对我有用。Restangular缺少配置。因此，我的服务有所改变，瞧！它在工作。

因此，更新的服务现在看起来像这样。DocumentServicesRestangular不过是通过RestangularConfigurer更改的工厂包装器。

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

Answer 2

尝试这样，

$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;
};

Answer 3

我通过更改$ http.get call在我的服务中解决了这个问题，以便在配置参数中设置响应类型：

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

Answer 4

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

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