Angular 带有 blob 和 Web 的 FileSaverAPI。下载的PDF是空白的。但是 API url returns PDF 内容

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);

            }

从 angular 开始，我正在使用 blob 和 FileSaver 来保存 PDF。所以当我下载它时。然后它只有 returns 两页但没有内容。但是它显示第 1 页和第 2 页但是它们是空白的。

这是我的 angular 代码：

 //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

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

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

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

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

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

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

Angular 带有 blob 和 Web 的 FileSaverAPI。下载的PDF是空白的。但是 API url returns PDF 内容

Angular FileSaver with blob and WebAPI . PDF downloaded is blank. But API url returns PDF with content

angularjs

asp.net-web-api

filesaver.js