Set Dateiname beim Download via blob in Winkel-5

Unten ist mein Typoskript-code für den download-Datei Vom 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 gut, um download Excel-Datei , aber es gibt einen zufälligen Namen für die Datei, die ich nicht will , ich will, die Datei Namen meiner Wahl, wenn es herunterladen ,

Wo kann ich einstellen, dass Datei-name hier ? jede Eigenschaft der Blob ?

InformationsquelleAutor Tanwer | 2018-08-22
  1. 9

    Wenn Sie möchten, dass der exakte Dateiname der hochgeladenen Datei, legen Sie eine benutzerdefinierte Kopfzeile den Dateinamen von gesicherten API-stream.

    Können Sie es verwenden, wie diese: meine Excel-API-Antwort-Header:

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

    Komponente.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');
  });
}
    • res.Header.get('Datei-Name') geholfen. tnx.
    InformationsquelleAutor Dhivakaran Ravi
  2. 9

    Können Sie den download-Attribut auf den Dateinamen, den Sie möchten, setzen Sie das href auf die Objekt-url, und dann rufen Sie einfach klicken Sie auf

    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();
    • Vielen Dank , es funktioniert, aber ich bin auch überprüfen, wenn ein pop-up im browser blockiert oder nicht , das schrieb ich var pwa = Anker.klicken Sie(); if (!pwa || pwa.geschlossen || typeof pwa.geschlossen == 'undefined') { alert ("Bitte deaktivieren Sie Ihren Pop-up blocker und versuchen Sie es erneut.'); } , aber im code ist es nicht möglich zu überprüfen, ist es als Anker.klicken Sie auf() nicht zurück, ein Fenster
    • möglicherweise müssen Sie einen hack gibt, upvote, wenn das geholfen
    • wie es passiert ist in JS-basiertes framework und JS kann deaktiviert werden , so Pflege ist auch erforderlich (pop-up-Nachricht aktivieren), Es teilweise geholfen, nicht vollständig
    • Als es löst "Eigenschaft" download "existiert nicht auf Typ HtmlAnchorElement" Einstellung als Anker.setAttribute("download", "<Dateiname>"); funktioniert
    InformationsquelleAutor Sajeetharan
  3. 0

    Da einige gefragt, für eine version mit Versprechen, so können Sie erwarten und async:

    Teil 1: Holen Sie sich die Blob Vom server:

      generateSapExcel(data: GenerateSapExport): Promise<HttpResponse<Blob>> {
    return this.http.post(`${this.pathprefix}/GenerateSapExcel`, data, { responseType: 'blob', observe: 'response' })
      .toPromise()
      .catch((error) => this.handleError(error));
  }

    Teil 2: Auszug HttpResponse und liefern Sie an die Benutzer:

    public downloadFile(data: HttpResponse<Blob>) {
    const contentDisposition = data.headers.get('content-disposition');
    const filename = this.getFilenameFromContentDisposition(contentDisposition);
    const blob = data.body;
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.download = filename;
    anchor.href = url;
    anchor.click();
  }

  private getFilenameFromContentDisposition(contentDisposition: string): string {
    const regex = /filename=(?<filename>[^,;]+);/g;
    const match = regex.exec(contentDisposition);
    const filename = match.groups.filename;
    return filename;
  }

    Teil 3: Kombinieren Sie beides:

          const blobresponse = await this.dataService.generateSapExcel(dataToSend);
      this.downloadService.downloadFile(blobresponse);

    Teil 4: server:

            [HttpPost]
        [Route(nameof(GenerateSapExcel))]
        public async Task<FileStreamResult> GenerateSapExcel(GenerateSapExportDto dto)
        {
            Stream stream = await _sapKurepoService.GenerateSapExcel(dto);
            FileStreamResult result = File(stream, FileHelper.ContentypeExcel, "excel.xlsx");
            return result;
        }
    InformationsquelleAutor yonexbat
Schreibe einen Kommentar