webentwicklung-frage-antwort-db.com.de

Legen Sie den Dateinamen während des Herunterladens über Blob fest Angular 5

Nachfolgend finden Sie meinen TypeScript-Code zum Herunterladen der Datei "Von 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.');
    }
  }

Dies ist in Ordnung, um die Excel-Datei herunterzuladen, aber sie gibt der Datei einen zufälligen Namen, den ich nicht möchte. Ich möchte den Dateinamen meiner Wahl beim Herunterladen festlegen.

Wo kann ich hier den Dateinamen einstellen? irgendein Eigentum von Blob?

angularangular5blob
1
Tanwer

Sie können das Download-Attribut auf den gewünschten Dateinamen setzen, die Href auf die Objekt-URL setzen und dann einfach click aufrufen

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

Wenn Sie den genauen Dateinamen der hochgeladenen Datei angeben möchten, legen Sie einen benutzerdefinierten Header des Dateinamens aus dem gesicherten API-Stream fest.

Sie können es wie folgt verwenden: Meine Excel-API-Antwortheader:

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);
  });
}

Component.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