web-dev-qa-db-fra.com

Comment télécharger un fichier depuis HttpClient

J'ai besoin de télécharger un Excel à partir de mon backend, il est retourné un fichier.

Quand je fais la demande j'obtiens l'erreur:

TypeError: vous avez indiqué 'non défini' lorsqu'un flux était attendu. Vous peut fournir un objet Observable, Promise, Array ou Iterable.

Mon code est:

this.http.get(`${environment.apiUrl}/...`)
      .subscribe(response => this.downloadFile(response, "application/ms-Excel"));

J'ai essayé d'obtenir et de cartographier (...) mais je n'ai pas fonctionné.

Détails: angulaire 5.2

références:

import { HttpClient } from '@angular/common/http';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/finally';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch';

Contenu-Type de réponse:

Content-Type: application/ms-Excel

Qu'est-ce qui ne va pas?

angularfileblobangular-httpclient
4
Jean Carlos

Essayez quelque chose comme ça:

type: application/ms-Excel

/**
 *  used to get file from server
 */

this.http.get(`${environment.apiUrl}`,{responseType: 'arraybuffer',headers:headers} )
      .subscribe(response => this.downLoadFile(response, "application/ms-Excel"));


    /**
     * Method is use to download file.
     * @param data - Array Buffer data
     * @param type - type of the document.
     */
    downLoadFile(data: any, type: string) {
        var blob = new Blob([data], { type: type});
        var url = window.URL.createObjectURL(blob);
        var pwa = window.open(url);
        if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
            alert( 'Please disable your Pop-up blocker and try again.');
        }
    }
10
AashishJ

Les blobs sont retournés avec le type de fichier du backend. La fonction suivante acceptera tout type de fichier et toute fenêtre de téléchargement contextuelle:

downloadFile(route: string, filename: string = null): void{

    const baseUrl = 'http://myserver/index.php/api';
    const token = 'my JWT';
    const headers = new HttpHeaders().set('authorization','Bearer '+token);
    this.http.get(baseUrl + route,{headers, responseType: 'blob' as 'json'}).subscribe(
        (response: any) =>{
            let dataType = response.type;
            let binaryData = [];
            binaryData.Push(response);
            let downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
            if (filename)
                downloadLink.setAttribute('download', filename);
            document.body.appendChild(downloadLink);
            downloadLink.click();
        }
    )
}
5
Hasan

Après avoir passé beaucoup de temps à chercher une réponse à cette réponse: comment télécharger une image simple de mon serveur reposant d'API écrit en Node.js dans une application à composant angulaire, j'ai finalement trouvé une belle réponse sur ce site Angular HttpClient Blob . Il consiste essentiellement en:

API Node.js reposant:

   /* After routing the path you want ..*/
  public getImage( req: Request, res: Response) {

    // Check if file exist...
    if (!req.params.file) {
      return res.status(httpStatus.badRequest).json({
        ok: false,
        msg: 'File param not found.'
      })
    }
    const absfile = path.join(STORE_ROOT_DIR,IMAGES_DIR, req.params.file);

    if (!fs.existsSync(absfile)) {
      return res.status(httpStatus.badRequest).json({
        ok: false,
        msg: 'File name not found on server.'
      })
    }
    res.sendFile(path.resolve(absfile));
  }

Angular 6 service de composant testé (EmployeeService sur mon cas):

  downloadPhoto( name: string) : Observable<Blob> {
    const url = environment.api_url + '/storer/employee/image/' + name;

    return this.http.get(url, { responseType: 'blob' })
      .pipe(
        takeWhile( () => this.alive),
        filter ( image => !!image));
  }

Modèle

 <img [src]="" class="custom-photo" #photo>

Composant abonné et utilisation:

@ViewChild('photo') image: ElementRef;

public LoadPhoto( name: string) {
    this._employeeService.downloadPhoto(name)
          .subscribe( image => {
            const url= window.URL.createObjectURL(image);
            this.image.nativeElement.src= url;
          }, error => {
            console.log('error downloading: ', error);
          })    
}
0
Marc