ng2-pdfjs-viewer Pass Object from component to html

Question

I'm using ng2-pdfjs-viewer and I can pass a pdf file http url but I can't use interpolation nor passing a variable to pdfSrc option inside html tag for rendering a pdf from a rest service response.

How can I pass a Uint8array or base64 object from component.ts to component.html?

Answer 1

An example for your case is provided here : https://ng2-pdfjs-viewer.azurewebsites.net/bytearray.

Code extract

your.component.html

<div style="height: 600px">
    <ng2-pdfjs-viewer #pdfViewer></ng2-pdfjs-viewer>
</div>

your.component.ts

 @ViewChild('pdfViewer') public pdfViewer;

constructor(private http: HttpClient) {
    let url = "api/document/getmypdf";
    this.downloadFile(url).subscribe(
        (res) => {
            this.pdfViewer.pdfSrc = res; // pdfSrc can be Blob or Uint8Array
            this.pdfViewer.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;
            })
        );
}