I need to show a pdf file in an iframe or embed.
This is the file that user selected from hisher local machine thru

<input type="file">  

Below is my code where I am converting the file into a base64 string and setting to Page 1 (line of code: this.gotoPage(1)) by default.
If I set this line of code to page n by default, Its working file.

onFilesSelected(event: any) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = () => {
      this.pdfSrc = reader.result as string
      this.gotoPage(1)
    };
    reader.onerror = () => {
      this.hasError = true
      this.progressText = "File can not be processed."
    };
    reader.readAsDataURL(file);
  } 

Below is the gotoPage function.

gotoPage(page_no: any) {
    if (typeof (page_no) == 'number') {
      const url = `${this.pdfSrc}#page=${page_no}`;
      this.sanitized_url = this._domSanitizer.bypassSecurityTrustResourceUrl(url)
    }
  }

However, My requirement is to be able to navigate to any page on a button click after the pdf is rendered in embed or iframe.

I have below 3 buttons.

<button (click)="goToPage(5)">Go to Page 5</button>
<button (click)="goToPage(10)">Go to Page 10</button>
<button (click)="goToPage(15)">Go to Page 15</button>

Here is the problem.
when I use embed (code below) to render the pdf file, it works fine and the desired page is set for the first time, but when I click any gotoPage button, the embed is blanking out.

<embed [src]="sanitized_url" type="application/pdf" scrolling="auto" height="99%" width="100%" />

when I use iframe (code below) to render the pdf file, it works fine and the desired page is set for the first time, but when I click any gotoPage button, nothing happens in iframe.
<iframe id="pdfIframe" [src]="sanitized_url" type="application/pdf" width="100%" height="99%"></iframe>

I am using chrome browser for this purpose.

Note: I can not use any external libraries.