Jak pobrać plik za pomocą Angular2 lub nowszego

Mam aplikację WebApi / MVC, dla której tworzę klienta angular2 (w celu zastąpienia MVC). Mam pewne problemy ze zrozumieniem, jak Angular zapisuje plik.

Żądanie jest w porządku (działa dobrze z MVC i możemy zarejestrować otrzymane dane), ale nie mogę dowiedzieć się, jak zapisać pobrane dane (głównie kieruję się tą samą logiką, co w tym poście ). Jestem pewien, że jest to głupio proste, ale jak dotąd po prostu tego nie rozumiem.

Kod funkcji komponentu znajduje się poniżej. Próbowałem różnych alternatyw, tak kropelka powinna być droga, iść tak daleko, jak to rozumieć, ale nie ma funkcji createObjectURLw URL. Nie mogę nawet znaleźć definicji URLw oknie, ale najwyraźniej istnieje. Jeśli używam FileSaver.jsmodułu, pojawia się ten sam błąd. Myślę więc, że jest to coś, co ostatnio się zmieniło lub nie zostało jeszcze wdrożone. Jak mogę wyzwolić zapis pliku w A2?

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

Ze względu na kompletność usługa, która pobiera dane, znajduje się poniżej, ale jedyne, co robi, to wysłanie żądania i przekazanie danych bez mapowania, jeśli się powiedzie:

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

Problem polega na tym, że obserwowalne działa w innym kontekście, więc kiedy próbujesz utworzyć zmienną URL, masz pusty obiekt, a nie żądany obiekt blob.

Jeden z wielu istniejących sposobów rozwiązania tego problemu jest następujący:

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

Gdy żądanie będzie gotowe, wywoła funkcję „downloadFile” zdefiniowaną w następujący sposób:

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

obiekt blob został stworzony idealnie, więc adres URL var, jeśli nie otwiera nowego okna, sprawdź, czy już zaimportowałeś 'rxjs / Rx';

  import 'rxjs/Rx' ;

Mam nadzieję, że to ci pomoże.

Spróbuj tego !

1 - Zainstaluj zależności dla wyskakującego okienka zapisz / otwórz plik

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

2- Utwórz usługę z tą funkcją, aby otrzymać dane

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- W komponencie przeanalizuj obiekt blob za pomocą „file-saver”

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

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

To działa dla mnie!

Jeśli nie musisz dodawać nagłówków w żądaniu, aby pobrać plik w Angular2, możesz wykonać proste :

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

w swoim komponencie.

To jest dla osób, które chcą to zrobić przy użyciu HttpClient i funkcji oszczędzania plików:

1. Zainstaluj oszczędzanie plików

npm install file-saver --save

npm install @ types / file-saver --save

Klasa usługi API:

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

Składnik:

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

Co powiesz na to?

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

Mógłbym z tym zrobić.
nie ma potrzeby dodatkowego pakietu.

Jak wspomniał Alejandro Corredor , jest to prosty błąd zakresu. subscribeProwadzony jest asynchronicznie i openmusi być umieszczony w tym kontekście, tak że dane zakończeniu ładowania kiedy wyzwolić pobieranie.

To powiedziawszy, można to zrobić na dwa sposoby. Zgodnie z dokumentacją usługa zajmuje się pobieraniem i mapowaniem danych:

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

Następnie w komponencie po prostu subskrybujemy i zajmujemy się zmapowanymi danymi. Są dwie możliwości. Pierwszy , jak sugerował w oryginalnym poście, ale wymaga niewielkiej korekty, jak zauważył Alejandro:

//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.'));
  }

Drugim sposobem byłoby użycie FileReader. Logika jest taka sama, ale możemy jawnie poczekać, aż FileReader załaduje dane, unikając zagnieżdżania i rozwiązując problem asynchroniczny.

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

Uwaga: próbuję pobrać plik programu Excel i mimo że pobieranie zostało uruchomione (więc to odpowiada na pytanie), plik jest uszkodzony. Zobacz odpowiedź na ten post, aby uniknąć uszkodzenia pliku.

Pobierz rozwiązanie * .zip dla angular 2.4.x: musisz zaimportować ResponseContentType z '@ angular / http' i zmienić responseType na ResponseContentType.ArrayBuffer (domyślnie 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']);
}

W przypadku nowszych wersji kątowych:

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

Pobieranie pliku przez Ajax jest zawsze bolesnym procesem i moim zdaniem najlepiej jest pozwolić serwerowi i przeglądarce na negocjację typu treści.

Myślę, że najlepiej mieć

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

zrobić to. Nie wymaga to nawet otwierania nowych okien i podobnych rzeczy.

Kontroler MVC taki jak w Twoim przykładzie może wyglądać jak ten poniżej:

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

Używam Angular 4 z obiektem 4.3 httpClient. Zmodyfikowałem odpowiedź, którą znalazłem na blogu technicznym Jsa, która tworzy obiekt linku, używa go do pobierania, a następnie niszczy.

Klient:

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

} 

Wartość this.downloadUrl została wcześniej ustawiona tak, aby wskazywała na interfejs API. Używam tego do pobierania załączników, więc znam identyfikator, typ zawartości i nazwę pliku: używam interfejsu API MVC, aby zwrócić plik:

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

Klasa załącznika wygląda następująco:

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

Repozytorium filerep zwraca plik z bazy danych.

Mam nadzieję, że to komuś pomoże :)

Dla osób używających Redux Pattern

Dodałem do wygaszacza plików, jak @Hector Cuevas wymienił w swojej odpowiedzi. Używając Angular2 v. 2.3.1, nie musiałem dodawać @ types / file-saver.

Poniższy przykład to pobranie dziennika w formacie PDF.

Działania dziennika

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

Efekty dziennika

@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'))

Usługa dziennika

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

Usługa HTTP

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

Reduktor dziennika Chociaż ustawia to tylko poprawne stany używane w naszej aplikacji, nadal chciałem go dodać, aby wyświetlić pełny wzór.

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: [] });
}

Mam nadzieję, że to jest pomocne.

Udostępniam rozwiązanie, które mi pomogło (każda poprawa jest bardzo mile widziana)

W Twojej usłudze „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'));
}

Część składowa:

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

W części składowej wywołujesz usługę bez subskrybowania odpowiedzi. Aby uzyskać pełną listę typów MIME OpenOffice, zapisz się na: http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html

Będzie lepiej, jeśli spróbujesz wywołać w sobie nową metodę subscribe

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

downloadFile(data)Funkcja wewnętrzna, którą musimy wykonaćblock, 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);
    }
}

Aby pobrać i wyświetlić pliki PDF , bardzo podobny fragment kodu wygląda jak poniżej:

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

Oto coś, co zrobiłem w moim przypadku -

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

Odniesienie do rozwiązania znajduje się tutaj

Zaktualizuj do odpowiedzi Hectora przy użyciu funkcji oszczędzania plików i HttpClient dla kroku 2:

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

Otrzymałem rozwiązanie do pobierania z Angular 2 bez uszkodzenia, używając sprężynowego MVC i kątowego 2

Pierwszy - mój typ zwrotu to: - ResponseEntity z końca java. Tutaj wysyłam tablicę bajtów [] ma typ zwrotu ze sterownika.

2nd - aby dołączyć wygaszacz plików do swojego obszaru roboczego - na stronie indeksu jako:

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

3rd- w komponencie ts napisz ten kod:

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

                });

To da ci format pliku xls. Jeśli chcesz inne formaty, zmień typ nośnika i nazwę pliku z odpowiednim rozszerzeniem.

Miałem dzisiaj do czynienia z tym samym przypadkiem, musiałem pobrać plik pdf jako załącznik (plik nie powinien być renderowany w przeglądarce, ale zamiast tego pobierany). Aby to osiągnąć, odkryłem, że muszę pobrać plik w Angular Blobi jednocześnie dodać Content-Dispositionnagłówek w odpowiedzi.

To był najprostszy, jaki mogłem uzyskać (Angular 7):

Wewnątrz usługi:

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

Następnie, gdy chcę pobrać plik w komponencie, mogę po prostu:

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

AKTUALIZACJA:

Usunięto niepotrzebne ustawienie nagłówka z usługi

Poniższy kod zadziałał dla mnie

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

W dotychczasowych odpowiedziach brakowało wglądu i ostrzeżeń. Możesz i powinieneś uważać na niezgodności z IE10 + (jeśli Ci zależy).

To jest kompletny przykład z częścią aplikacyjną i częścią serwisową po. Zwróć uwagę, że ustawiliśmy klauzulę observ: "response", aby złapać nagłówek nazwy pliku. Należy również pamiętać, że nagłówek Content-Disposition musi być ustawiony i ujawniony przez serwer, w przeciwnym razie bieżący HttpClient kątowy nie przekaże go dalej. Dodałem poniżej podstawowy fragment kodu dotnet .

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

Rdzeń Dotnet, z Content-Disposition i MediaType

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

Wystarczy umieścić urltak hrefjak poniżej.

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

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

my_url powinien mieć to samo źródło, w przeciwnym razie przekieruje do tej lokalizacji

Możesz również pobrać plik bezpośrednio z szablonu, w którym używasz atrybutu pobierania i [attr.href]możesz podać wartość właściwości z komponentu. To proste rozwiązanie powinno działać na większości przeglądarek.

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

Źródła: https://www.w3schools.com/tags/att_a_download.asp

Jeśli wysyłasz parametry tylko na adres URL, możesz to zrobić w ten sposób:

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

w serwisie, który otrzymuje parametry

Ta odpowiedź sugeruje, że nie można pobierać plików bezpośrednio za pomocą AJAX, głównie ze względów bezpieczeństwa. Więc opiszę, co robię w tej sytuacji,

01. Dodaj hrefatrybut w tagu kotwicy wewnątrz component.htmlpliku,
np .: -

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

02. Wykonaj wszystkie poniższe kroki, component.tsaby ominąć poziom zabezpieczeń i wyświetlić okno dialogowe Zapisz jako wyskakujące okienko,
np .: -

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

Uwaga: ta odpowiedź zadziała, jeśli zostanie wyświetlony błąd „OK” z kodem stanu 200

Cóż, napisałem fragment kodu zainspirowany wieloma z powyższych odpowiedzi, który powinien z łatwością działać w większości scenariuszy, w których serwer wysyła plik z nagłówkiem dyspozycji treści, bez żadnych instalacji innych firm, z wyjątkiem rxjs i angular.

Po pierwsze, jak wywołać kod z pliku komponentu

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

Jak widać, jest to w zasadzie przeciętne wywołanie backendu z angular, z dwiema zmianami

1. Obserwuję odpowiedź zamiast ciała
2. Mówię wprost o odpowiedzi będącej kropką

Po pobraniu pliku z serwera w zasadzie deleguję całe zadanie zapisania pliku do funkcji pomocniczej, którą trzymam w osobnym pliku i importuję do dowolnego komponentu, którego potrzebuję

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

Nie ma już tajemniczych nazw plików GUID! Możemy użyć dowolnej nazwy dostarczonej przez serwer, bez konieczności jawnego określania jej w kliencie, lub nadpisać nazwę pliku dostarczoną przez serwer (jak w tym przykładzie). Można też łatwo, jeśli zajdzie taka potrzeba, zmienić algorytm wyodrębniania nazwy pliku z dyspozycji zawartości, aby odpowiadał jej potrzebom, a wszystko inne pozostanie nienaruszone - w przypadku błędu podczas takiej ekstrakcji po prostu przejdzie 'null' jako nazwa pliku.

Jak już wskazała inna odpowiedź, IE wymaga specjalnego traktowania, jak zawsze. Ale ponieważ chromium Edge pojawi się za kilka miesięcy, nie martwiłbym się tym podczas tworzenia nowych aplikacji (miejmy nadzieję). Jest też kwestia unieważnienia adresu URL, ale nie jestem tego pewien, więc jeśli ktoś mógłby pomóc w komentarzach, byłoby wspaniale.

Jeśli karta otwiera się i zamyka bez pobierania czegokolwiek, próbowałem podążać za fałszywym łączem kotwicy i zadziałało.

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