Visualizzare PDF nel Browser con Angular e ng2-pdf-viewer

La libreria ng2-pdf-viewer ci permette di caricare e visualizzare un PDF direttamente nel browser in Angular.

Il suo utilizzo è abbastanza semplice; cominciamo con installare la libreria:

npm install ng2-pdf-viewer --save

Poi aggiungiamo il modulo nel file app.module.ts:

.....
import {PdfViewerModule} from 'ng2-pdf-viewer';

@NgModule({
    imports: [
        .....
        PdfViewerModule
    ],
    declarations: [
        .....
    ],
    providers: [
        .....
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

Poi nel nostro componente:

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {

    pdfSource: string;

    constructor() {
        this.pdfSource = 'https://www.sito.it/file.pdf';
    }

    ngOnInit(): void {
    }

}

Infine l'HTML:

<pdf-viewer [src]="pdfSource" [render-text]="true" [external-link-target]="'blank'" style="display: block;"></pdf-viewer>

Enjoy!