带有 blob 和 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);

            }

现在从角度来看，我使用 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

我通过更改服务中的 $http.get 调用来解决此问题，以便在配置参数中设置响应类型：

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

Answer 2

我不得不更改 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 3

像这样尝试，

$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 4

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

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