Displaying a pdf using ng2-pdf-viewer in Angular

Question

I am trying to use ng2-pdf-viewer to display a pdf. I am obtaining the pdf as a response from a post request. The functionality is that when I click on Dispute for Dognosis the pdf should be displayed.UI

I get the following error in my console logs console logs. I am getting a valid response in my api call valid response in browser valid response in postman

here is the html code for the link

<a (click)="displayFile()" target="_blank" class="highlight">{{
 element.dDocTitle
  }}</a>

here are some other functions used

displayFile() {
    this.tempBlob = null;
    this.backendService.downloadFileMock().subscribe((retFileData: any) => {
    this.tempRetFileData = retFileData;
    this.tempBlob = new Blob([retFileData], { type: 'application/pdf' });
    const fileReader = new FileReader();
    fileReader.onload = () => {
        this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);
        this.displayOverlay(this.pdfEle);
    };
    fileReader.readAsArrayBuffer(this.tempBlob);
    });
  }

  displayOverlay(ele: ElementRef) {
    let displayElement = ele.nativeElement;
    this.renderer.setStyle(displayElement, 'display', 'block');
   }

here is the html code for pdf-viewer

<div #pdf id="overlay" (click)="closeOverlay(pdfEle)">
  <div
    id="overlay-content"
    style="overflow: auto"
    (click)="$event.stopPropagation()"
  >
    <div class="closing-bar">
      <div id="popup-header">
        File Preview
        <button id="close-button" (click)="closeOverlay(pdfEle)">X</button>
      </div>
   </div>
    <div id="scroll">
      <div>
        <div>
      <pdf-viewer
        [src]="pdfSrc"
        [rotation]="0"
        [original-size]="true"
        [show-all]="true"
        [fit-to-page]="false"
        [zoom]="1"
        [zoom-scale]="'page-width'"
        [stick-to-page]="false"
        [render-text]="true"
        [external-link-target]="'blank'"
        [autoresize]="true"
        [show-borders]="false"
        style="height: 2500px; width: 900px"
      ></pdf-viewer>
             </div>
       </div>
     </div>
  </div>
</div>

here is the api call I made

 downloadFileMock() {
   let formData = new FormData();
   formData.append('fileName', "artghh.pdf")
   const headers = new HttpHeaders().set('Access-Control-Allow-Origin', '*');

    return this.http
    .post(this.baseURL + '/downloadMock' ,formData);
  }

Please feel free to reach out for any further clarifications.

Answer 1

This is an educated guess, based on the fact that you apparently get a good response when using postman, but not when your Angular code posts to the same location. Also the fact that you are setting the Access-Control-Allow-Origin header in your client request.

You probably are having a problem with CORS.

Postman will always work, because it doesn't require CORS...but the browser does.

And clearly, you have a misunderstanding about how CORS works, because that Access-Control-Allow-Origin header is something that the server should be setting in the response to your post, not something that you should be sending from the client.

So, it's probably a back-end configuration issue.

You haven't specified what your back-end is, so I can't offer any further advice except that you read up on the documentation for whatever server / framework you are using on the back-end, and figure out how to set up CORS properly there.