Display pdf using angularjs

Question

I am trying to download a pdf file from server and show it in browser. The web api method that I have returns the file as httpResponseMessage and that is working fine because it returns the file. But on the AngularJs side I am not able to display the file. Can somebody help me understand what am I missing?

Web Api Method:

  public HttpResponseMessage GetHelpReferenceDocs(Guid streamKey)
    {
        var fakeFileName = GetStream(streamKey); // If this succeeds, stream is known and unexpired.

        // Internal file name
        string staticFileName = helpFiles[fakeFileName];

        var mappedPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Static/" + staticFileName);

        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(mappedPath, FileMode.Open, FileAccess.Read, FileShare.Read);

        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
        result.Content.Headers.ContentDisposition.FileName = Path.GetFileName(mappedPath);
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
        result.Content.Headers.ContentLength = stream.Length;
        return result;


    }

AngularJS:

  function loadDocument(fileName) {

        REST.post(commonService.constants.webapi.helpFileStreamKey + fileName)
      .then(function(response) {
          var streamGuid = response.data;

          REST.get(commonService.constants.webapi.helpReferenceGuide + streamGuid).then(function (response) {

             $window.open(response.data);

          });

            })
        .catch(function (e) { $scope.errorHandler(moduleName, e); })
        .finally($scope.waitOn);
    }

score 0 · Answer 1 · edited May 23 '17 at 10:29

0

Take a look at the suggestions here, or alternatively you can try an npm module specifically for displaying pdfs where this is already taken care of for you, such as this one.

edited May 23 '17 at 10:29

Community

1
1

answered Feb 09 '17 at 15:21

C. Helling

1,394
6
20
34

score 0 · Accepted Answer · answered Feb 09 '17 at 18:12

Ok I found the solution. Needed to modify my Angular code a little bit and it worked fine. Here is the code if somebody facing the same problem:

 function loadDocument(fileName) {

        REST.post(commonService.constants.webapi.helpFileStreamKey + 'firmUserGuid')
      .then(function(response) {
          var streamGuid = response.data;

          REST.get(commonService.constants.webapi.helpReferenceGuide + streamGuid).then(function (response) {
              var pdfFileURL = response.config.url;
              $window.open(pdfFileURL);

          });

            })
        .catch(function (e) { $scope.errorHandler(moduleName, e); })
        .finally($scope.waitOn);
    }

Display pdf using angularjs

2 Answers2