Download di file PDF da Angular

Mattepuffo's logo
Download di file PDF da Angular

Download di file PDF da Angular

Ovviamente devo scaricare un PDF in una app Angular, ma senza usare un calssico link.

Lo devo fare da codice.

Questo perchè devo passare all'API dei parametri e il token di autenticazione.

Vediamo il codice Typescript ripreso dal un mio caso reale.

Prima di tutto, mettiamo la logica di download in un service:

@Injectable({
    providedIn: 'root'
})

export class GiacenzaService {

    private baseUrl: string = environment.baseUrl;

    constructor(private http: HttpClient) {
    }

    getPdf(lnk: string): Observable<Blob> {
        return this.http.get(lnk, {responseType: 'blob'});
    }

}

Nel component avremo una funzione del genere:

downPdf(): void {
    this.giacService.getPdf('https://www.api.com/param1/param2).subscribe(x => {
        const newBlob = new Blob([x], {type: 'application/pdf'});

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(newBlob);
            return;
        }

        const data = window.URL.createObjectURL(newBlob);

        const link = document.createElement('a');
        link.href = data;
        link.download = 'test.pdf';
        link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

        setTimeout(() => {
            window.URL.revokeObjectURL(data);
            link.remove();
        }, 100);

    });
}

Infine l'HTML:

<button pButton pRipple type="button" label="PDF" (click)="downPdf()"></button>

Enjoy!


Condividi

Commentami!