CODEWITHSUNDEEP
angular6pdf.jsng2-pdfjs-viewer
Steffi M
Steffi M

Reputation: 95

Use ng2-pdfjs-viewer to display pdf using s3 signed url

I am required to display a pdf that is returned by a s3 signed url as a file object. I am trying to use the ng2-pdfjs-viewer to display. But it doesnt seem to work.

I tried using the s3 url directly to pdfSrc but it doesn't work.

component.html:

 <ng2-pdfjs-viewer pdfSrc="pdfUrl"></ng2-pdfjs-viewer>

component.ts

previewProtocol(){
//this.spinner.show();
this.service.getS3Url(deviceType).subscribe((response) => {
    $('#BSModal').modal("show");
    console.log(response);
    this.pdfUrl = response;
   },
  (err)=> {

  });

}

Upvotes: 5

Views: 5715

Answers (1)

Aneesh Gopalakrishnan
Aneesh Gopalakrishnan

Reputation: 702

EDIT 08/23/2019

As per this issue - https://github.com/intbot/ng2-pdfjs-viewer/issues/9

One of the users added this as a solution. Might be of some help.

"I want to follow up on this as I was uploading a generated PDF to Amazon s3 and then trying to use the s3 bucket URL to ng2-pdfjs but was hitting CORS errors in Chrome. The s3 bucket was a public bucket and there are CORS policies you can configure on the bucket itself. By default there are none, and that produces this wonderful error:

the has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To fix this, you need to set a CORS policy on your bucket:

Go to AWS Console > S3 > Your Bucket > Permissions > CORS Configuration and add something like this in the CORS configuration editor:"

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

"Click on Save and you should now be able to load the s3 bucket PDF in ng2-pdfjs.

https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

I hope that helps someone in the future with using s3 and ng2-pdfjs."

Old Answer - Relevant for scenarios like this

You may not be able to directly set the url to the pdf viewer. Instead call an api to return bytearray. Then feed the byte array into ng2-pdfjs-viewer component.

This is due to the fact that, the url is set using location attribute within the component. Thus modifying the headers or cors might not work properly.

Please see the issue here: https://github.com/intbot/ng2-pdfjs-viewer/issues/36

The relevant code to get this working could be

<!-- your.component.html -->
<button (click)="openPdf();">Open Pdf</button>

<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer 
    #pdfViewerOnDemand
    [externalWindow]="true"
    [downloadFileName]="'mytestfile.pdf'"
    [openFile]="false"
    [viewBookmark]="false"
    [download]="false"></ng2-pdfjs-viewer>
</div>
<div>
<div style="width: 800px; height: 400px">
  <ng2-pdfjs-viewer #pdfViewerAutoLoad></ng2-pdfjs-viewer>
</div>

<!-- your.component.ts-->
import { Component, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
...

export class MyComponent implements OnInit {
  @ViewChild('pdfViewerOnDemand') pdfViewerOnDemand;
  @ViewChild('pdfViewerAutoLoad') pdfViewerAutoLoad;
  ...

  constructor(private http: HttpClient) {
      let url = "api/document/getmypdf"; // Or your url
      this.downloadFile(url).subscribe(
          (res) => {
              this.pdfViewerAutoLoad.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
              this.pdfViewerAutoLoad.refresh(); // Ask pdf viewer to load/refresh pdf
          }
      );
  }

  private downloadFile(url: string): any {
        return this.http.get(url, { responseType: 'blob' })
            .pipe(
                map((result: any) => {
                    return result;
                })
            );
    }

  public openPdf() {
    let url = "url to fetch pdf as byte array"; // E.g. http://localhost:3000/api/GetMyPdf
    // url can be local url or remote http request to an api/pdf file. 
    // E.g: let url = "assets/pdf-sample.pdf";
    // E.g: https://github.com/intbot/ng2-pdfjs-viewer/tree/master/sampledoc/pdf-sample.pdf
    // E.g: http://localhost:3000/api/GetMyPdf
    // Please note, for remote urls to work, CORS should be enabled at the server. Read: https://enable-cors.org/server.html

    this.downloadFile(url).subscribe(
    (res) => {
        this.pdfViewerOnDemand.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
        this.pdfViewerOnDemand.refresh(); // Ask pdf viewer to load/reresh pdf
      }
    );
  }

FYI: I am the author of this package.

Upvotes: 3

Related Questions