CODEWITHSUNDEEP
angularpdf
Pedro Tomaz
Pedro Tomaz

Reputation: 51

ng2-pdf-viewer - does not display automatic pdf

I have an angular application 8 that I receive a pdf file from the API. In the angle view, I took the pdf file as a blob and converted it into a FileReader to use the byte array. I am facing the following problem, the pdf only appears on the screen when I click on the page or scroll the screen. I have already tested several properties of ng2-pdf-viewr and nothing worked. I want the pdf to be displayed on the screen as soon as I upload it. Can anyone help me with this problem?

component.html:

<pdf-viewer 
    [src]="fileReader.result" 
    style="display: block;">
</pdf-viewer>

component.ts:

private actionsForSuccessDownloadFile(data: any, tipo: string) {
      this.blob = new Blob([data], { type: tipo });

      // Blob -> ArrayBuffer
      this.fileReader.readAsArrayBuffer(this.blob);
      this.loading = false; 
}

Upvotes: 2

Views: 8224

Answers (2)

Nerdya
Nerdya

Reputation: 41

Found a temporary fix. In component.html:

<pdf-viewer 
    [src]="fileReader.result" 
    style="display: block; min-height: 250px">
</pdf-viewer>

No need to be specific 250px

Upvotes: 4

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2004

Another way to build PDF in Angular. Just have a look https://www.pdftron.com/blog/angular/build-a-pdf-viewer-in-angular-and-pdf-js/

Upvotes: 0

Related Questions