Angular2 veya daha üstü bir dosyayı nasıl indirebilirim?

(MVC değiştirmek için) bir açısal2 istemci geliştiriyorum bir WebApi / MVC uygulaması var. Angular'ın bir dosyayı nasıl kaydettiğini anlama konusunda bazı sorunlar yaşıyorum.

İstek tamam (MVC ile iyi çalışıyor ve alınan verileri kaydedebiliriz) ama indirilen verileri nasıl kaydedeceğimizi anlayamıyorum (çoğunlukla bu yazıda olduğu gibi aynı mantığı takip ediyorum ). Eminim aptalca basit, ama şimdiye kadar basitçe kavramıyorum.

Bileşen işlevinin kodu aşağıdadır. Ben damla yolu bildiğim kadarıyla anlamış olarak gitmek için yol olmalıdır, farklı alternatifler denedim ama hiçbir işlevi yoktur createObjectURLiçinde URL. URLPencerenin tanımını bile bulamıyorum , ama görünüşe göre var. FileSaver.jsModülü kullanırsam aynı hatayı alıyorum. Bu yüzden sanırım bu son zamanlarda değişen veya henüz uygulanmayan bir şey. A2'de dosya kaydetmeyi nasıl tetikleyebilirim?

downloadfile(type: string){

    let thefile = {};
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    let url = window.URL.createObjectURL(thefile);
    window.open(url);
}

Tamlık uğruna, verileri getiren hizmet aşağıdadır, ancak yaptığı tek şey isteği vermek ve başarılı olursa verileri eşlemeden iletmektir:

downloadfile(runname: string, type: string){
   return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .catch(this.logAndPassOn);
}

Sorun gözlemlenebilir başka bir bağlamda çalışır, bu yüzden URL var oluşturmaya çalıştığınızda, istediğiniz blob değil boş bir nesne var.

Bunu çözmek için var olan birçok yoldan biri şöyledir:

this._reportService.getReport().subscribe(data => this.downloadFile(data)),//console.log(data),
                 error => console.log('Error downloading the file.'),
                 () => console.info('OK');

İstek hazır olduğunda, aşağıdaki gibi tanımlanan "downloadFile" işlevini çağırır:

downloadFile(data: Response) {
  const blob = new Blob([data], { type: 'text/csv' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
}

blob mükemmel bir şekilde oluşturulmuştur ve bu nedenle URL var, yeni pencereyi açmazsa lütfen 'rxjs / Rx' dosyasını zaten içe aktarıp almadığınızı kontrol edin;

  import 'rxjs/Rx' ;

umuyorum ki bu sana yardım edebilir.

Deneyin bu !

1 - Show save / open dosya pop-up'ı için bağımlılıkları yükleyin

npm install file-saver --save
npm install @types/file-saver --save

2- Verileri almak için bu fonksiyonla bir servis oluşturun

downloadFile(id): Observable<Blob> {
    let options = new RequestOptions({responseType: ResponseContentType.Blob });
    return this.http.get(this._baseUrl + '/' + id, options)
        .map(res => res.blob())
        .catch(this.handleError)
}

3- Bileşende blob'u 'dosya koruyucu' ile ayrıştırın

import {saveAs as importedSaveAs} from "file-saver";

  this.myService.downloadFile(this.id).subscribe(blob => {
            importedSaveAs(blob, this.fileName);
        }
    )

Bu benim için çalışıyor!

İstekte üstbilgi eklemeniz gerekmiyorsa , Angular2'de bir dosya indirmek için basit bir işlem yapabilirsiniz :

window.location.href='http://example.com/myuri/report?param=x';

bileşeninizde.

Bu, HttpClient ve dosya tasarrufu kullanarak nasıl yapılacağını arayan kişiler içindir:

1. Dosya tasarrufunu yükle

npm yükleme dosya tasarrufu - kaydetme

npm install @ types / dosya tasarrufu - kaydetme

API Hizmet sınıfı:

export() {
    return this.http.get(this.download_endpoint, 
        {responseType: 'blob'});
}

Bileşen:

import { saveAs } from 'file-saver';
exportPdf() {
    this.api_service.export().subscribe(data => saveAs(data, `pdf report.pdf`));
}

Buna ne dersin?

this.http.get(targetUrl,{responseType:ResponseContentType.Blob})
        .catch((err)=>{return [do yourself]})
        .subscribe((res:Response)=>{
          var a = document.createElement("a");
          a.href = URL.createObjectURL(res.blob());
          a.download = fileName;
          // start download
          a.click();
        })

Onunla yapabilirim.
ek pakete gerek yok.

Alejandro Corredor'un belirttiği gibi basit bir kapsam hatasıdır. subscribeUyumsuz çalıştırılan veopen böylece veri yüklenmesi bittikten biz indir tetikleyebilir zaman, bu bağlamda yerleştirilmelidir.

Bununla birlikte, bunu yapmanın iki yolu vardır. Dokümanların önerdiği gibi, hizmet veri alma ve haritalama ile ilgilenir:

//On the service:
downloadfile(runname: string, type: string){
  var headers = new Headers();
  headers.append('responseType', 'arraybuffer');
  return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
            .map(res => new Blob([res],{ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }))
            .catch(this.logAndPassOn);
}

Daha sonra, bileşen üzerinde sadece haritalanan verilerle abone oluruz ve ilgileniriz. İki olasılık vardır. Birincisi , orijinal gönderide önerildiği gibi, ancak Alejandro tarafından belirtildiği gibi küçük bir düzeltmeye ihtiyaç duyuyor:

//On the component
downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
      .subscribe(data => window.open(window.URL.createObjectURL(data)),
                  error => console.log("Error downloading the file."),
                  () => console.log('Completed file download.'));
  }

İkinci yol FileReader kullanmaktır. Mantık aynıdır, ancak FileReader'ın verileri yüklemesini, iç içe geçmesini engelleyip zaman uyumsuz sorunu çözmesini açıkça bekleyebiliriz.

//On the component using FileReader
downloadfile(type: string){
    var reader = new FileReader();
    this.pservice.downloadfile(this.rundata.name, type)
        .subscribe(res => reader.readAsDataURL(res), 
                    error => console.log("Error downloading the file."),
                    () => console.log('Completed file download.'));

    reader.onloadend = function (e) {
        window.open(reader.result, 'Excel', 'width=20,height=10,toolbar=0,menubar=0,scrollbars=no');
  }
}

Not: Bir Excel dosyası indirmeye çalışıyorum ve indirme tetiklenmiş olsa da (bu soruya cevap veriyor), dosya bozuk. Bu yayına verilen cevaba bakınız için bozuk dosyayı kaçınarak.

Açısal 2.4.x için * .zip çözümünü indirin: ResponseContentType öğesini '@ angular / http' den içe aktarmanız ve responseType öğesini ResponseContentType.ArrayBuffer olarak değiştirmeniz gerekir (varsayılan olarak ResponseContentType.Json)

getZip(path: string, params: URLSearchParams = new URLSearchParams()): Observable<any> {
 let headers = this.setHeaders({
      'Content-Type': 'application/zip',
      'Accept': 'application/zip'
    });

 return this.http.get(`${environment.apiUrl}${path}`, { 
   headers: headers, 
   search: params, 
   responseType: ResponseContentType.ArrayBuffer //magic
 })
          .catch(this.formatErrors)
          .map((res:Response) => res['_body']);
}

Daha yeni açısal sürümler için:

npm install file-saver --save
npm install @types/file-saver --save


import {saveAs} from 'file-saver/FileSaver';

this.http.get('endpoint/', {responseType: "blob", headers: {'Accept': 'application/pdf'}})
  .subscribe(blob => {
    saveAs(blob, 'download.pdf');
  });

Dosyayı ajax ile indirmek her zaman acı verici bir süreçtir ve bence sunucu ve tarayıcının içerik türü müzakerelerinin bu işini yapmasına izin vermek en iyisidir.

Bence sahip olmak en iyisi

<a href="api/sample/download"></a> 

yapmak için. Bu, herhangi bir yeni pencere açılmasını ve bunun gibi şeyleri bile gerektirmez.

Numunenizdeki gibi MVC kontrol cihazı aşağıdaki gibi olabilir:

[HttpGet("[action]")]
public async Task<FileContentResult> DownloadFile()
{
    // ...
    return File(dataStream.ToArray(), "text/plain", "myblob.txt");
}

4.3 httpClient nesnesiyle Açısal 4 kullanıyorum. Js Teknik Blogu'nda bulduğum bir bağlantı nesnesi oluşturan, indirmeyi yapmak için kullanan ve daha sonra yok eden bir yanıtı değiştirdim.

Müşteri:

doDownload(id: number, contentType: string) {
    return this.http
        .get(this.downloadUrl + id.toString(), { headers: new HttpHeaders().append('Content-Type', contentType), responseType: 'blob', observe: 'body' })
}

downloadFile(id: number, contentType: string, filename:string)  {

    return this.doDownload(id, contentType).subscribe(  
        res => { 
            var url = window.URL.createObjectURL(res);
            var a = document.createElement('a');
            document.body.appendChild(a);
            a.setAttribute('style', 'display: none');
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove(); // remove the element
        }, error => {
            console.log('download error:', JSON.stringify(error));
        }, () => {
            console.log('Completed file download.')
        }); 

} 

This.downloadUrl değeri daha önce API'yi gösterecek şekilde ayarlanmıştı. Ekleri indirmek için kullanıyorum, bu yüzden id, contentType ve dosya adını biliyorum: Dosyayı döndürmek için bir MVC api kullanıyorum:

 [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
    public FileContentResult GetAttachment(Int32 attachmentID)
    { 
        Attachment AT = filerep.GetAttachment(attachmentID);            
        if (AT != null)
        {
            return new FileContentResult(AT.FileBytes, AT.ContentType);  
        }
        else
        { 
            return null;
        } 
    } 

Ataşman sınıfı şuna benzer:

 public class Attachment
{  
    public Int32 AttachmentID { get; set; }
    public string FileName { get; set; }
    public byte[] FileBytes { get; set; }
    public string ContentType { get; set; } 
}

Disk belleği deposu dosyayı veritabanından döndürür.

Umarım bu birine yardımcı olur :)

Redux Desenini kullananlar için

Yanıtında @Hector Cuevas adlı dosya tasarrufuna ekledim. Angular2 s. 2.3.1 kullanarak, @ types / file saver içine eklemem gerekmiyordu.

Aşağıdaki örnek bir günlüğü PDF olarak indirmektir.

Dergi işlemleri

public static DOWNLOAD_JOURNALS = '[Journals] Download as PDF';
public downloadJournals(referenceId: string): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS,
   payload: { referenceId: referenceId }
 };
}

public static DOWNLOAD_JOURNALS_SUCCESS = '[Journals] Download as PDF Success';
public downloadJournalsSuccess(blob: Blob): Action {
 return {
   type: JournalActions.DOWNLOAD_JOURNALS_SUCCESS,
   payload: { blob: blob }
 };
}

Dergi efektleri

@Effect() download$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS)
    .switchMap(({payload}) =>
        this._journalApiService.downloadJournal(payload.referenceId)
        .map((blob) => this._actions.downloadJournalsSuccess(blob))
        .catch((err) => handleError(err, this._actions.downloadJournalsFail(err)))
    );

@Effect() downloadJournalSuccess$ = this.actions$
    .ofType(JournalActions.DOWNLOAD_JOURNALS_SUCCESS)
    .map(({payload}) => saveBlobAs(payload.blob, 'journal.pdf'))

Dergi hizmeti

public downloadJournal(referenceId: string): Observable<any> {
    const url = `${this._config.momentumApi}/api/journals/${referenceId}/download`;
    return this._http.getBlob(url);
}

HTTP hizmeti

public getBlob = (url: string): Observable<any> => {
    return this.request({
        method: RequestMethod.Get,
        url: url,
        responseType: ResponseContentType.Blob
    });
};

Dergi düşürücü Bu sadece uygulamamızda kullanılan doğru durumları ayarlamasına rağmen, yine de tüm deseni göstermek için eklemek istedim.

case JournalActions.DOWNLOAD_JOURNALS: {
  return Object.assign({}, state, <IJournalState>{ downloading: true, hasValidationErrors: false, errors: [] });
}

case JournalActions.DOWNLOAD_JOURNALS_SUCCESS: {
  return Object.assign({}, state, <IJournalState>{ downloading: false, hasValidationErrors: false, errors: [] });
}

Umarım bu yardımcı olur.

Bana yardımcı olan çözümü paylaşıyorum (herhangi bir gelişme büyük beğeni topluyor)

Senin üzerinde hizmet 'pservice':

getMyFileFromBackend(typeName: string): Observable<any>{
    let param = new URLSearchParams();
    param.set('type', typeName);
    // setting 'responseType: 2' tells angular that you are loading an arraybuffer
    return this.http.get(http://MYSITE/API/FILEIMPORT, {search: params, responseType: 2})
            .map(res => res.text())
            .catch((error:any) => Observable.throw(error || 'Server error'));
}

Bileşen Bölümü:

downloadfile(type: string){
   this.pservice.getMyFileFromBackend(typename).subscribe(
                    res => this.extractData(res),
                    (error:any) => Observable.throw(error || 'Server error')
                );
}

extractData(res: string){
    // transforme response to blob
    let myBlob: Blob = new Blob([res], {type: 'application/vnd.oasis.opendocument.spreadsheet'}); // replace the type by whatever type is your response

    var fileURL = URL.createObjectURL(myBlob);
    // Cross your fingers at this point and pray whatever you're used to pray
    window.open(fileURL);
}

Bileşen kısmında, bir yanıta abone olmadan hizmeti çağırırsınız. OpenOffice mime türlerinin tam listesi için abone olun: http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html

İçinizdeki yeni yöntemi çağırmayı denerseniz daha iyi olur subscribe

this._reportService.getReport()
    .subscribe((data: any) => {
        this.downloadFile(data);
    },
        (error: any) => сonsole.log(error),
        () => console.log('Complete')
    );

İç downloadFile(data)fonksiyon yapmamız gerekiyorblock, link, href and file name

downloadFile(data: any, type: number, name: string) {
    const blob = new Blob([data], {type: 'text/csv'});
    const dataURL = window.URL.createObjectURL(blob);

    // IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob);
      return;
    }

    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'export file.csv';
    link.click();

    setTimeout(() => {

      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(dataURL);
      }, 100);
    }
}

PDF dosyalarını indirmek ve göstermek için , çok benzer bir kod kesildi aşağıdaki gibidir:

  private downloadFile(data: Response): void {
    let blob = new Blob([data.blob()], { type: "application/pdf" });
    let url = window.URL.createObjectURL(blob);
    window.open(url);
  }

  public showFile(fileEndpointPath: string): void {
    let reqOpt: RequestOptions = this.getAcmOptions();  //  getAcmOptions is our helper method. Change this line according to request headers you need.
    reqOpt.responseType = ResponseContentType.Blob;
    this.http
      .get(fileEndpointPath, reqOpt)
      .subscribe(
        data => this.downloadFile(data),
        error => alert("Error downloading file!"),
        () => console.log("OK!")
      );
  }

İşte benim durumumda yaptığım bir şey -

// service method
downloadFiles(vendorName, fileName) {
    return this.http.get(this.appconstants.filesDownloadUrl, { params: { vendorName: vendorName, fileName: fileName }, responseType: 'arraybuffer' }).map((res: ArrayBuffer) => { return res; })
        .catch((error: any) => _throw('Server error: ' + error));
}

// a controller function which actually downloads the file
saveData(data, fileName) {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    let blob = new Blob([data], { type: "octet/stream" }),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
}

// a controller function to be called on requesting a download
downloadFiles() {
    this.service.downloadFiles(this.vendorName, this.fileName).subscribe(data => this.saveData(data, this.fileName), error => console.log("Error downloading the file."),
        () => console.info("OK"));
}

Çözüme - buradan

Adım 2 için Hector'un cevabını dosya tasarrufu ve HttpClient kullanarak güncelleyin:

public downloadFile(file: File): Observable<Blob> {
    return this.http.get(file.fullPath, {responseType: 'blob'})
}

Bahar mvc ve açısal 2 kullanarak açısal 2'den bozulmadan indirmek için bir çözüm buldum

1 - benim dönüş türü: - Java sonundan ResponseEntity . Burada bayt [] dizisi denetleyiciden dönüş türü var gönderiyorum.

2. - Dosya koruyucunuzu çalışma alanınıza dizin sayfasına eklemek için:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

3. bileşen ts'de bu kodu yazın:

import {ResponseContentType} from '@angular.core';

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' });
        let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob });
            this.http
            .post('/project/test/export',
                    somevalue,options)
              .subscribe(data => {

                  var mediaType = 'application/vnd.ms-excel';
                  let blob: Blob = data.blob();
                    window['saveAs'](blob, 'sample.xls');

                });

Bu size xls dosya biçimini verecektir. Diğer formatları istiyorsanız, doğru uzantı ile mediatype ve dosya adını değiştirin.

Bugün aynı davaya bakıyordum, ek olarak bir pdf dosyası indirmek zorunda kaldım (dosya tarayıcıda işlenmemeli, bunun yerine indirilmelidir). Bunu başarmak için dosyayı Açısal olarak almam Blobve aynı zamanda Content-Dispositionyanıtta bir başlık eklemem gerektiğini keşfettim .

Bu alabildiğim en basitti (Açısal 7):

Hizmetin içinde:

getFile(id: String): Observable<HttpResponse<Blob>> {
  return this.http.get(`./file/${id}`, {responseType: 'blob', observe: 'response'});
}

Sonra, dosyayı bir bileşende indirmem gerektiğinde, şunları yapabilirsiniz:

fileService.getFile('123').subscribe((file: HttpResponse<Blob>) => window.location.href = file.url);

GÜNCELLEME:

Gereksiz başlık ayarı hizmetten kaldırıldı

Aşağıdaki kod benim için çalıştı

let link = document.createElement('a');
link.href = data.fileurl; //data is object received as response
link.download = data.fileurl.substr(data.fileurl.lastIndexOf('/') + 1);
link.click();

Şu ana kadar verilen cevapların yanı sıra içgörüler ve uyarılar da buldum. IE10 + ile uyumsuzlukları izleyebilir ve izlemelisiniz (eğer ilgilenirseniz).

Bu, uygulama bölümü ve hizmet bölümünden sonraki tam örnektir. Gözlem adını ayarladığımızı unutmayın : dosya adının başlığını yakalamak için. Ayrıca, Content-Disposition üstbilgisinin sunucu tarafından ayarlanması ve gösterilmesi gerektiğini unutmayın, aksi takdirde geçerli Açısal HttpClient bunu iletmez. Aşağıda bunun için bir dotnet çekirdek kodu ekledim .

public exportAsExcelFile(dataId: InputData) {
    return this.http.get(this.apiUrl + `event/export/${event.id}`, {
        responseType: "blob",
        observe: "response"
    }).pipe(
        tap(response => {
            this.downloadFile(response.body, this.parseFilename(response.headers.get('Content-Disposition')));
        })
    );
}

private downloadFile(data: Blob, filename: string) {
    const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;'});
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        if (link.download !== undefined) {
            // Browsers that support HTML5 download attribute
            const url = URL.createObjectURL(blob);
            link.setAttribute('href', url);
            link.setAttribute('download', filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

private parseFilename(contentDisposition): string {
    if (!contentDisposition) return null;
    let matches = /filename="(.*?)"/g.exec(contentDisposition);

    return matches && matches.length > 1 ? matches[1] : null;
}

Dotnet çekirdeği, Content-Disposition ve MediaType ile

 private object ConvertFileResponse(ExcelOutputDto excelOutput)
    {
        if (excelOutput != null)
        {
            ContentDisposition contentDisposition = new ContentDisposition
            {
                FileName = excelOutput.FileName.Contains(_excelExportService.XlsxExtension) ? excelOutput.FileName : "TeamsiteExport.xlsx",
                Inline = false
            };
            Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
            Response.Headers.Add("Content-Disposition", contentDisposition.ToString());
            return File(excelOutput.ExcelSheet, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        }
        else
        {
            throw new UserFriendlyException("The excel output was empty due to no events.");
        }
    }

 let headers = new Headers({
                'Content-Type': 'application/json',
                'MyApp-Application': 'AppName',
                'Accept': 'application/vnd.ms-excel'
            });
            let options = new RequestOptions({
                headers: headers,
                responseType: ResponseContentType.Blob
            });


this.http.post(this.urlName + '/services/exportNewUpc', localStorageValue, options)
                .subscribe(data => {
                    if (navigator.appVersion.toString().indexOf('.NET') > 0)
                    window.navigator.msSaveBlob(data.blob(), "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+".xlsx");

                    else {
                        var a = document.createElement("a");
                        a.href = URL.createObjectURL(data.blob());
                        a.download = "Export_NewUPC-Items_" + this.selectedcategory + "_" + this.retailname +"_Report_"+this.myDate+ ".xlsx";
                        a.click();
                    }
                    this.ui_loader = false;
                    this.selectedexport = 0;
                }, error => {
                    console.log(error.json());
                    this.ui_loader = false;
                    document.getElementById("exceptionerror").click();
                });

Basitçe aşağıdaki urlgibi koyun href.

<a href="my_url">Download File</a>

<a href="my_url" download="myfilename">Download file</a>

my_url aynı kökene sahip olmalıdır, aksi takdirde o konuma yönlendirilir

Ayrıca, indirme özniteliğini kullandığınız şablondan doğrudan bir dosya indirebilir [attr.href]ve bileşenden bir özellik değeri sağlayabilirsiniz. Bu basit çözüm çoğu tarayıcıda çalışmalıdır.

<a download [attr.href]="yourDownloadLink"></a>

Referans: https://www.w3schools.com/tags/att_a_download.asp

Parametreleri yalnızca bir URL'ye gönderirseniz, bunu şu şekilde yapabilirsiniz:

downloadfile(runname: string, type: string): string {
   return window.location.href = `${this.files_api + this.title +"/"+ runname + "/?file="+ type}`;
}

parametreleri alan hizmette

Bu yanıt, öncelikle güvenlik nedeniyle dosyaları AJAX ile doğrudan indiremeyeceğinizi göstermektedir. Bu durumda ne yaptığımı anlatacağım,

01. Bağlantıhref etiketinize component.htmldosyanın içine nitelik ekleyin ,
örneğin: -

<div>
       <a [href]="fileUrl" mat-raised-button (click)='getGenaratedLetterTemplate(element)'> GENARATE </a>
</div>

02.component.ts Güvenlik seviyesini atlamak ve açılır pencere olarak kaydet diyalog penceresini getirmek için aşağıdaki tüm adımları gerçekleştirin
:

import { environment } from 'environments/environment';
import { DomSanitizer } from '@angular/platform-browser';
export class ViewHrApprovalComponent implements OnInit {
private apiUrl = environment.apiUrl;
  fileUrl
 constructor(
    private sanitizer: DomSanitizer,
    private letterService: LetterService) {}
getGenaratedLetterTemplate(letter) {

    this.data.getGenaratedLetterTemplate(letter.letterId).subscribe(
      // cannot download files directly with AJAX, primarily for security reasons);
    console.log(this.apiUrl + 'getGeneratedLetter/' + letter.letterId);
    this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.apiUrl + 'getGeneratedLetter/' + letter.letterId);
  }

Not: Durum kodu 200 ile "Tamam" hatası alıyorsanız, bu cevap işe yarar

Eh, sunucunun bir içerik düzenleme başlığına sahip bir dosya gönderdiğinde, rxjs ve açısal hariç herhangi bir üçüncü taraf yüklemesi olmadan çoğu senaryoda kolayca çalışması gereken yukarıdaki cevapların çoğundan esinlenen bir kod parçası yazdım.

İlk olarak, bileşen dosyanızdan kodu nasıl çağırırsınız

this.httpclient.get(
   `${myBackend}`,
   {
      observe: 'response',
      responseType: 'blob'
   }
).pipe(first())
.subscribe(response => SaveFileResponse(response, 'Custom File Name.extension'));

Gördüğünüz gibi, temelde iki değişiklikle açısaldan ortalama arka uç çağrısı

1. Beden yerine yanıtı gözlemliyorum
2. Yanıtın bir leke olduğu konusunda net davranıyorum

Dosya sunucudan getirildikten sonra, prensip olarak, dosyayı ayrı bir dosyada tuttuğum yardımcı fonksiyona kaydetme görevini devrediyorum ve hangi bileşene ihtiyacım olursa içeri aktarıyorum

export const SaveFileResponse = 
(response: HttpResponse<Blob>, 
 filename: string = null) => 
{
    //null-checks, just because :P
    if (response == null || response.body == null)
        return;

    let serverProvidesName: boolean = true;
    if (filename != null)
        serverProvidesName = false;

    //assuming the header is something like
    //content-disposition: attachment; filename=TestDownload.xlsx; filename*=UTF-8''TestDownload.xlsx
    if (serverProvidesName)
        try {
            let f: string = response.headers.get('content-disposition').split(';')[1];
            if (f.includes('filename='))
                filename = f.substring(10);
        }
        catch { }
    SaveFile(response.body, filename);
}

//Create an anchor element, attach file to it, and
//programmatically click it. 
export const SaveFile = (blobfile: Blob, filename: string = null) => {
    const a = document.createElement('a');
    a.href = window.URL.createObjectURL(blobfile);
    a.download = filename;
    a.click();
}

Artık şifreli GUID dosya adları yok! Sunucunun sağladığı herhangi bir adı, istemcide açıkça belirtmek zorunda kalmadan kullanabilir veya sunucu tarafından sağlanan dosya adının üzerine yazabiliriz (bu örnekte olduğu gibi). Ayrıca, ihtiyaç duyulması halinde dosya adını içerik düzeninden çıkarma algoritmasını kolayca değiştirebilir ve diğer her şey etkilenmeyecektir - bu tür bir çıkarma sırasında bir hata olması durumunda 'boş' iletilecektir. dosya adı olarak.

Başka bir cevabın işaret ettiği gibi, IE her zamanki gibi özel bir tedaviye ihtiyaç duyuyor. Ancak krom kenarı birkaç ay içinde gelirken, yeni uygulamalar geliştirirken endişelenmeyeceğim (umarım). URL'yi iptal etme meselesi de var, ancak bunun hakkında biraz emin değilim, bu yüzden birisi yorumlarda buna yardımcı olabilirse, bu harika olurdu.

Bir sekme bir şey indirmeden açılır ve kapanırsa, sahte bağlantı ile takip etmeyi denedim ve çalıştı.

downloadFile(x: any) {
var newBlob = new Blob([x], { type: "application/octet-stream" });

    // IE doesn't allow using a blob object directly as link href
    // instead it is necessary to use msSaveOrOpenBlob
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(newBlob);
      return;
    }

    // For other browsers: 
    // Create a link pointing to the ObjectURL containing the blob.
    const data = window.URL.createObjectURL(newBlob);

    var link = document.createElement('a');
    link.href = data;
    link.download = "mapped.xlsx";
    // this is necessary as link.click() does not work on the latest firefox
    link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

    setTimeout(function () {
      // For Firefox it is necessary to delay revoking the ObjectURL
      window.URL.revokeObjectURL(data);
      link.remove();
    }, 100);  }