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

Question

This is my API for returning a PDF with multiple images . Now when I invoke this with url it perfectly downloads the PDF with images . For eg two pages with images .

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

            }

Now from angular I am using blob and FileSaver for saving the PDF . So when I download it . Then it just returns two pages but with no content . But it shows page 1 and page2 but they are blank .

Here is my angular code :

 //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 () {

            });
        }

And the service :

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

Does anyone has any idea why is it returning the blank pages when saved with FileSaver, while with direct download it is perfectly fine with all content.

Answer 1

I had to change certain things in Restangular . It was the responseType had to be arrayBuffer or 'blob'. I haven't tried with arrayBuffer explicitly . The blob responsetype worked for me . The configurations were missing from restangular. So I made a little change in my service and voila ! It was working.

So the updated Service looks like this now . DocumentServicesRestangular is nothing but a factory wrapper with changed baseurl through RestangularConfigurer.

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

Answer 2

Try Like this,

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