Question

这是我的API，用于返回包含多个图像的PDF。现在，当我使用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);

            }

现在从角度我使用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保存时会返回空白页面，而直接下载则对所有内容都完全没问题。

Answer 1

我不得不改变Restangular中的某些东西。 responseType必须是arrayBuffer或'blob'。我没有明确尝试过arrayBuffer。 blob响应类型对我有用。 restangular中缺少配置。所以我对我的服务做了一些改变，瞧！它工作正常。

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

   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调用来修复此问题，以便在config参数中设置响应类型：

post_save

Answer 4

如果您使用的是var data = new Blob([response], { type: 'application/pdf;charset=utf-8' }); FileSaver.saveAs(data, filename);，那么这是正确的语法

{{1}}

带有blob和WebAPI的Angular FileSaver。下载的PDF是空白的。但API网址会返回包含内容的PDF

4 个答案: