Angular 6 Téléchargement du fichier à partir de l'API Rest

Question

J'ai mon API REST où je place mon fichier pdf, maintenant je veux que mon application angulaire la télécharge en un clic via mon navigateur Web mais j'ai HttpErrorResponse

"Jeton% inattendu dans JSON à la position 0"

"SyntaxError:% de jeton inattendu dans JSON à la position 0 à JSON.parse (

c'est mon point final

     @GetMapping("/help/pdf2")
public ResponseEntity<InputStreamResource> getPdf2(){

    Resource resource = new ClassPathResource("/pdf-sample.pdf");
    long r = 0;
    InputStream is=null;

    try {
        is = resource.getInputStream();
        r = resource.contentLength();
    } catch (IOException e) {
        e.printStackTrace();
    }

        return ResponseEntity.ok().contentLength(r)
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(is));

}

c'est mon service

   getPdf() {

this.authKey = localStorage.getItem('jwt_token');

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/pdf',
    'Authorization' : this.authKey,
    responseType : 'blob',
    Accept : 'application/pdf',
    observe : 'response'
  })
};
return this.http
  .get("http://localhost:9989/api/download/help/pdf2", httpOptions);

}

et invocation

 this.downloadService.getPdf()
  .subscribe((resultBlob: Blob) => {
  var downloadURL = URL.createObjectURL(resultBlob);
  window.open(downloadURL);});

Answer 1

Je l'ai résolu comme suit:

 // header.component.ts
this.downloadService.getPdf().subscribe((data) => {

  this.blob = new Blob([data], {type: 'application/pdf'});

  var downloadURL = window.URL.createObjectURL(data);
  var link = document.createElement('a');
  link.href = downloadURL;
  link.download = "help.pdf";
  link.click();

});



//download.service.ts
getPdf() {

  this.authKey = localStorage.getItem('jwt_token');

  const httpOptions = {
    responseType: 'blob' as 'json',
    headers: new HttpHeaders({
      'Authorization': this.authKey,
    })
  };

  return this.http.get(`${this.BASE_URL}/help/pdf`, httpOptions);
}

Answer 2

Vous pouvez le faire avec des directives angulaires:

 @Directive({
    selector: '[downloadInvoice]',
    exportAs: 'downloadInvoice',
})
export class DownloadInvoiceDirective implements OnDestroy {
    @Input() orderNumber: string;
    private destroy$: Subject<void> = new Subject<void>();
    _loading = false;

    constructor(private ref: ElementRef, private api: Api) {}

    @HostListener('click')
    onClick(): void {
        this._loading = true;
        this.api.downloadInvoice(this.orderNumber)
            .pipe(
                takeUntil(this.destroy$),
                map(response => new Blob([response], { type: 'application/pdf' })),
            )
            .subscribe((pdf: Blob) => {
                this.ref.nativeElement.href = window.URL.createObjectURL(pdf);
                this.ref.nativeElement.click();
            });
    }
    
    // your loading custom class
    @HostBinding('class.btn-loading') get loading() {
        return this._loading;
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

Dans le modèle:

 <a
      downloadInvoice
      [orderNumber]="order.number"
      class="btn-show-invoice"
  >
     Show invoice
  </a>

Answer 3

Cela fonctionne également dans IE et Chrome, presque la même réponse que pour les autres navigateurs, la réponse est un peu plus courte.

 getPdf(url: string): void {
    this.invoiceService.getPdf(url).subscribe(response => {

      // It is necessary to create a new blob object with mime-type explicitly set
      // otherwise only Chrome works like it should
      const newBlob = new Blob([(response)], { type: 'application/pdf' });

      // IE doesn't allow using a blob object directly as link href
      // instead it is necessary to use msSaveOrOpenBlob
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(newBlob);
          return;
      }

      // For other browsers:
      // Create a link pointing to the ObjectURL containing the blob.
      const downloadURL = URL.createObjectURL(newBlob);
        window.open(downloadURL);
    });
  }