web-dev-qa-db-fra.com

Définir le nom du fichier lors du téléchargement via blob dans Angular 5

Ci-dessous se trouve mon code TypeScript pour télécharger le fichier à partir de l'API 

DownloadLM() {
var ID= sessionStorage.getItem("UserID");
    return this.http.get(this.baseurl + 'api/DownloadFiles/DownloadLM/' + ID,
      {
        headers: {
          'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
      }
    )
      .subscribe(respData => {
        this.downLoad(respData, this.type);
      }, error => {
      });
  }

  downLoad(data: any, type: string) {
    var blob = new Blob([data], { type: type.toString() });
    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.');
    }
  }

C'est parfait pour télécharger Excel File, mais cela donne un nom aléatoire à un fichier que je ne veux pas, je veux définir le nom de fichier de mon choix lors du téléchargement, 

Où puis-je définir le nom du fichier ici? une propriété de Blob?

angularangular5blob
1
Tanwer

Vous pouvez définir l'attribut de téléchargement sur le nom de fichier souhaité, le href sur l'URL de l'objet, puis simplement cliquer sur

var blob = new Blob([data], { type: type.toString() });
var url = window.URL.createObjectURL(blob);
var anchor = document.createElement("a");
anchor.download = "myfile.txt";
anchor.href = blobURL;
anchor.click();
2
Sajeetharan

Si vous voulez le nom de fichier exact du fichier téléchargé, définissez un en-tête personnalisé du nom de fichier à partir du flux d'API sauvegardé.

Vous pouvez l'utiliser comme ceci: En-têtes de réponse de mon API Excel:

content-disposition: inline;filename="salesReport.xls" 
content-type: application/octet-stream 
date: Wed, 22 Aug 2018 06:47:28 GMT 
expires: 0 
file-name: salesReport.xls 
pragma: no-cache 
transfer-encoding: chunked 
x-application-context: application:8080 
x-content-type-options: nosniff 
x-xss-protection: 1; mode=block

Service.ts 

Excel(data: any) {
  return this.httpClient.post(this.config.domain + 
  `/api/registration/Excel/download`,data, {observe: 'response', responseType: 'blob'})
  .map((res) => {
      let data = {
                     image: new Blob([res.body], {type: res.headers.get('Content-Type')}),
                     filename: res.headers.get('File-Name')
                  }
    return data ;
  }).catch((err) => {
    return Observable.throw(err);
  });
}

Composant.ts 

excelDownload (data) {
   this.registration.Excel(data).subscribe(
    (res) => {
     const element = document.createElement('a');
      element.href = URL.createObjectURL(res.image);
      element.download = res.filename;
      document.body.appendChild(element);
      element.click();
     this.toastr.success("Excel generated  successfully");
    },
  (error) =>{
     this.toastr.error('Data Not Found');
  });
}
2
Dhivakaran Ravi