CODEWITHSUNDEEP
angularpdf
Lisa
Lisa

Reputation: 1

Angular 2 - using a PDF Viewer to display PDF obtained from a web service API

I am new to Angular 2 and it has been a while since I've done web development so I'm rusty. I was able to get my small angular 2 app up and running fairly quickly. However, I'm stuck on what pdf viewer to use to display a PDF that was retrieved via a web API in my web browser (SPA) (not in a new browser window). I was successful in converting my response from the web api into a blob and displaying it in a new browser/tab window by doing the following:

my.ts file:

 onGetFullPdf() {
    this.pasSignerService.getPasFormFullPdf()
      .subscribe(
        (pdfBlob: Blob) => {
          var fileURL = URL.createObjectURL(pdfBlob);
          // this works but opens it in a new window
          window.open(fileURL);
}

Can someone tell me how to get a PDF (from a web api) displayed on my browser tab (not a new tab)? I'd like to have all of the nice PDF controls. I found pdf.js_viewer but that is for angularJS (not angular 2/4/x). I saw one called ng2-pdf-viewer but it doesn't seem to be full featured. I feel like I'm missing something basic.

Upvotes: 0

Views: 3096

Answers (1)

Navid Golforoushan
Navid Golforoushan

Reputation: 776

you can set content type on the response header to "application/pdf" most of the new browsers have nice controller set and full functionality to support and use as a pdf reader. You just need to tell the browser: 'hey im sending you a pdf!", browser will take care of the rest.

on asp.net=> 

context.response.ContentType="application/pdf";

on js=>

res.setHeader('content-type', 'application/pdf');

chrome & edge controllers for pdf files enter image description here

enter image description here

Upvotes: 1

Related Questions