How to view file in new tab with angular js 5?

Question

I am trying to view file in browser in new tab but in service i am not getting any response and it is throwing me in catch handler of my service and in handler i am not getting any specific error to troubleshoot the problem.

I am sending Authorization token in header because my view document api is protected.

Also there are 2 below calls going on which i dont understand why :

Call1

Call2

Code :

Controller:

viewFile(index) {
    this.FileService.view("f819f948-b5dd-4478-ad69-b0e610627375").subscribe((response) => {
      if (response.message === "success") {
        window.open(this.baseUrl + response.id, '_blank');
      }
     }),
      (error) => {
        console.log('error');
    }
  }

FileService.ts

view(id): Observable<any> {
    return this._http.get<any>(this.baseUrl + 'example/document/' + id)
    .catch(this.handleError);
  }

  handleError(error: HttpErrorResponse) { //always throwing here
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
      console.log(error);
    }
    return new ErrorObservable(
      'Something bad happened; please try again later.');
  };

Webapi core: Supporting method

 IServiceContext _ctx;
 Stream stream = repo.GetFileStream("abc.pdf", filePath);
                if (stream.CanSeek)
                {
                    stream.Seek(0, SeekOrigin.Begin);
                }
                _ctx.req.HttpContext.Response.Headers.Add("Content-Disposition", "inline; filename=" + "abc.pdf");
                var provider = new FileExtensionContentTypeProvider().
                TryGetContentType("abc.pdf", out string contentType);
                _ctx.req.HttpContext.Response.ContentType = contentType;
                stream.CopyTo(_ctx.reqobj.HttpContext.Response.Body);
                stream.Flush();

I am not getting whats the issue here and most importantly why there are 2 get calls?

When i call my view api document api in postman then i can see the file and also when i go in preview of Develer tool in chrome then i am able to see the image but it is not working with angular js.

Am i missing anything from server end or something is wrong in client side?

I will appreciate any help :)

How to view file in new tab with angular js 5?

0 Answers0