web-dev-qa-db-fra.com

téléchargement du fichier xlsx dans angular 2 avec blob

Je veux télécharger le fichier xlsx à partir du client sur angular 2 en utilisant l'api de repos.

Je reçois un tableau d'octets en réponse à ma demande GET et je l'envoie à la fonction de téléchargement avec abonnement:

let options = new RequestOptions({ search: params });
this.http.get(this.restUrl, options)
          .subscribe(this.download);

fonction de téléchargement à l'aide de blob:

download(res: Response) {
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
FileSaver.saveAs(data, this.fileName);};

mon problème est que mon fichier est corrompu tout le temps. J'ai essayé beaucoup de versions mais rien ne fonctionne.

** a également essayé avec cette solution et cela ne fonctionne pas (le fichier xlsx est toujours corrompu) - Angular 2 télécharge un fichier: résultat corromp , la différence est que mes données sont un tampon de tableau et pas de chaîne ou json, et il y a une différence entre PDF et xlsx.

10x!

angulartypescriptblob
10
reut

Après rien ne fonctionne. J'ai changé mon serveur pour retourner le même tableau d'octets avec l'ajout de:

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");

Chez mon client, j'ai supprimé la fonction de téléchargement et au lieu de la partie GET, j'ai fait:

window.open(this.restUrl, "_blank");

C'est la seule façon dont j'ai trouvé possible d'enregistrer un fichier xlsx qui n'est pas corrompu.

Si vous avez une réponse sur la façon de le faire avec blob, dites-le moi :)

5
reut

J'avais le même problème que le vôtre - corrigez-le en ajoutant responseType: ResponseContentType.Blob à mes options Get. Vérifiez le code ci-dessous:

public getReport(filters: ReportOptions) {
    return this.http.get(this.url, {
            headers: this.headers,
            params: filters,
            responseType: ResponseContentType.Blob
        })
        .toPromise()
        .then(response => this.saveAsBlob(response))
        .catch(error => this.handleError(error));
}

Le saveAsBlob () est juste un wrapper pour le FileSaver.SaveAs ():

private saveAsBlob(data: any) {
    const blob = new Blob([data._body],
        { type: 'application/vnd.ms-Excel' });
    const file = new File([blob], 'report.xlsx',
        { type: 'application/vnd.ms-Excel' });

    FileSaver.saveAs(file);
}
11
Vergatti

vous pouvez utiliser le code ci-dessous:

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);
1
El mehdi AZROUR

Pour moi, le problème était que mon type de réponse était "texte". Au lieu de cela, j'avais besoin d'utiliser "blob"; Cela fonctionne pour moi sur Angular 7.2.15.

0
Andris

Voici la solution qui prend en charge IE et les navigateurs chrome/safari. Ici, l'objet 'response' est une réponse reçue du service. J'ai ce travail pour l'archivage. Vous pouvez changer le type selon la réponse reçue du service.

    let blob = new Blob([response], {type: 'application/Zip'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.Zip');
    } else {
        this.reportDownloadName = fileUrl;
        window.open(fileUrl);
    }
0
Dilip Nannaware

La solution suivante a fonctionné pour moi dans Google Chrome Version 58.0.3029.110 (64 bits).

C'est un article expliquant comment télécharger un pdf en utilisant un Blob: https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

C'est le même principe pour un fichier xlsx. Suivez simplement les étapes de l'article et changez deux choses:

  • En-tête, au lieu de {'Accepter': 'application/pdf'}, utilisez {'Accepter': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'};
  • Blob, utilisez le même type pour la création de votre blob, nouveau blob ([fileBlob], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}).

L'article utilise File Saver mais je ne l'ai pas fait. J'ai laissé un commentaire, dans l'article, avec une explication de base de ce que j'ai utilisé à la place de File Saver.

0
Arthur Almeida