web-dev-qa-db-fra.com

Angular 6 ResponseContentType

J'essaie de télécharger des xls depuis mon api rest, mais en vain, ai-je besoin de quelque chose pour utiliser ResponseContentType?

[ts] O módulo '"/home/dev/Documentos/Java-TUDO/SIMPLUS/simplus-cliente/node_modules/@angular/common/http"' não tem nenhum membro exportado 'ResponseContentType'.


import ResponseContentType
import { Injectable } from '@angular/core';
import { HttpClient, ResponseContentType } from '@angular/common/http';
import { Product } from '../model/product.model';

@Injectable()
export class ProductService {
angularrestapispring-bootxls
6
Junior Osho

La bonne façon de télécharger un fichier est d'utiliser responseType: 'blob'.

Voici également un exemple de passage de l'en-tête d'authentification. Ce n'est pas nécessaire, mais vous pouvez voir la méthode get du HttpClient pour en savoir plus sur la façon de construire cela pour envoyer des en-têtes supplémentaires.

//service
public downloadExcelFile() {
const url = 'http://exmapleAPI/download';
const encodedAuth = window.localStorage.getItem('encodedAuth');

return this.http.get(url, { headers: new HttpHeaders({
  'Authorization': 'Basic ' + encodedAuth,
  'Content-Type': 'application/octet-stream',
  }), responseType: 'blob'}).pipe (
  tap (
    // Log the result or error
    data => console.log('You received data'),
    error => console.log(error)
  )
 );
}

HttpClient get ().

 /**
 * Construct a GET request which interprets the body as an `ArrayBuffer` and returns it.
 *
 * @return an `Observable` of the body as an `ArrayBuffer`.
 */
get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'arraybuffer';
    withCredentials?: boolean;
}): Observable<ArrayBuffer>;

Vous pouvez consommer cela dans le composant comme ceci.

    datePipe = new DatePipe('en-Aus');

    onExport() {
    this.service.downloadExcelFile().subscribe((res) => {
      const now = Date.now();
      const myFormattedDate = this.datePipe.transform(now, 'yyMMdd_HH:mm:ss');
      saveAs(res, `${this.docTitle}-${myFormattedDate}.xlsx`);
    }, error => {
      console.log(error);
    });
  }

J'ai utilisé DatePipe de @ angular/common pour rendre le nom de fichier unique.

J'ai également utilisé l'économiseur de fichiers pour enregistrer le fichier.

Pour importer l'économiseur de fichiers, installez l'économiseur de fichiers en ajoutant ces packages ci-dessous.

npm install -S file-saver
npm install -D @types/file-saver

Et dans votre composant, ajoutez l'instruction d'importation.

import { saveAs } from 'file-saver';
10
Mukus