ng2-pdfjs-viewer

To install and configure, check the npm package here: ng2-pdfjs-viewer

Github source: ng2-pdfjs-viewer
Access source of this entire demo here: ng2-pdfjs-viewer Demo

PDF as byte array loaded using server apis - Auto load.

html


<!-- your.component.html -->
<div style="height: 600px">
    <ng2-pdfjs-viewer #pdfViewer></ng2-pdfjs-viewer>
</div>

typescript


<!-- 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;
            })
        );
}

Server Side (Example in C#)


[HttpGet]
[Route("GetMyPdf")]
public IActionResult GetMyPdf()
{
    var pdfPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/assets/pdfjs/web/gre_research_validity_data.pdf");
    byte[] bytes = System.IO.File.ReadAllBytes(pdfPath);
    return File(bytes, "application/pdf");
}
Note: All physical pdf files such as 'gre_research_validity_data.pdf' and 'pdf-sample.pdf' should be in application's 'assets' folder or public folder.

This demo is built using @MarkPieszak's aspnetcore-angular-universal repo(aspnetcore-angular-universal). It is one of the best new project templates I found for aspnetcore+angular projects.