ฉันจะดาวน์โหลดไฟล์ด้วย Angular2 หรือสูงกว่าได้อย่างไร

ฉันมีแอป WebApi / MVC ซึ่งฉันกำลังพัฒนาไคลเอ็นต์ angular2 (เพื่อแทนที่ MVC) ฉันมีปัญหาในการทำความเข้าใจว่า Angular บันทึกไฟล์อย่างไร

คำขอนั้นใช้ได้ (ทำงานได้ดีกับ MVC และเราสามารถบันทึกข้อมูลที่ได้รับ) แต่ฉันไม่สามารถหาวิธีบันทึกข้อมูลที่ดาวน์โหลดได้ (ส่วนใหญ่ฉันใช้ตรรกะเดียวกันกับในโพสต์นี้ ) ฉันแน่ใจว่ามันง่ายอย่างโง่เขลา แต่จนถึงตอนนี้ฉันก็ไม่เข้าใจ

รหัสของฟังก์ชั่นส่วนประกอบอยู่ด้านล่าง ฉันได้พยายามทางเลือกที่แตกต่างกันวิธีการหยดที่ควรจะเป็นวิธีที่จะไปให้ไกลที่สุดเท่าที่ผมเข้าใจ แต่มีฟังก์ชั่นที่ไม่มีในcreateObjectURL URLฉันไม่สามารถหาคำจำกัดความของURLในหน้าต่างได้ แต่ดูเหมือนว่ามันมีอยู่จริง ถ้าฉันใช้FileSaver.jsโมดูลฉันได้รับข้อผิดพลาดเดียวกัน ดังนั้นฉันคิดว่านี่เป็นสิ่งที่เปลี่ยนแปลงเร็ว ๆ นี้หรือยังไม่ได้ใช้งาน ฉันจะทริกเกอร์ไฟล์บันทึกใน 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);
}

เพื่อความสมบูรณ์บริการที่ดึงข้อมูลอยู่ด้านล่าง แต่สิ่งเดียวที่ทำคือออกคำขอและส่งผ่านข้อมูลโดยไม่ต้องจับคู่ข้อมูลหากทำสำเร็จ:

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

ปัญหาคือว่าสิ่งที่สังเกตได้จะทำงานในบริบทอื่นดังนั้นเมื่อคุณพยายามสร้าง var URL คุณจะมีวัตถุว่างเปล่าและไม่ใช่หยดที่คุณต้องการ

หนึ่งในหลาย ๆ วิธีที่มีอยู่เพื่อแก้ไขปัญหานี้มีดังนี้:

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

เมื่อคำขอพร้อมจะเรียกใช้ฟังก์ชัน "downloadFile" ที่กำหนดไว้ดังนี้:

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

blob นั้นถูกสร้างอย่างสมบูรณ์แบบและดังนั้น URL var, หากไม่ได้เปิดหน้าต่างใหม่โปรดตรวจสอบว่าคุณได้นำเข้า 'rxjs / Rx' แล้ว;

  import 'rxjs/Rx' ;

ฉันหวังว่านี่จะช่วยคุณได้

ลองสิ่งนี้ !

1 - ติดตั้งการพึ่งพาสำหรับป๊อปอัปการบันทึก / เปิดไฟล์

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

2- สร้างบริการด้วยฟังก์ชันนี้เพื่อรับข้อมูลใหม่

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- ในองค์ประกอบการแยก blob ด้วย 'file-saver'

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

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

มันใช้งานได้สำหรับฉัน!

หากคุณไม่ต้องการเพิ่มส่วนหัวในคำขอเพื่อดาวน์โหลดไฟล์ใน Angular2 คุณสามารถทำได้ง่าย ๆ :

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

ในองค์ประกอบของคุณ

นี่สำหรับคนที่กำลังมองหาวิธีการใช้ HttpClient และ file-saver:

1. ติดตั้งโปรแกรมรักษาไฟล์

npm ติดตั้งโปรแกรมรักษาไฟล์ - บันทึก

npm install @ types / file-saver --save

คลาสบริการ API:

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

ส่วนประกอบคือ:

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

แล้วเรื่องนี้ล่ะ

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

ฉันสามารถทำได้กับมัน
ไม่จำเป็นต้องมีแพ็คเกจเพิ่มเติม

ดังกล่าวโดยAlejandro Corredorมันเป็นข้อผิดพลาดขอบเขตง่าย ๆ The subscribeจะทำงานแบบอะซิงโครนัสและopenจะต้องอยู่ในบริบทนั้นเพื่อให้ข้อมูลโหลดเสร็จเมื่อเราทริกเกอร์การดาวน์โหลด

ที่กล่าวว่ามีสองวิธีในการทำมัน เนื่องจากเอกสารแนะนำให้ใช้บริการดูแลการรับและการแมปข้อมูล:

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

จากนั้นในส่วนที่เราเพิ่งสมัครและจัดการกับข้อมูลที่แมป มีความเป็นไปได้สองอย่าง ครั้งแรกตามที่แนะนำในโพสต์ต้นฉบับ แต่ต้องการการแก้ไขเล็กน้อยตามที่ระบุไว้โดย 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.'));
  }

วิธีที่สองจะใช้ FileReader ตรรกะเหมือนกัน แต่เราสามารถรออย่างชัดเจนว่า FileReader ทำการโหลดข้อมูลหลีกเลี่ยงการซ้อนและแก้ไขปัญหา async

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

หมายเหตุ:ฉันกำลังพยายามดาวน์โหลดไฟล์ Excel และแม้ว่าการดาวน์โหลดจะถูกทริกเกอร์ (ดังนั้นนี่เป็นการตอบคำถาม) ไฟล์นั้นเสียหาย ดูคำตอบสำหรับโพสต์นี้เพื่อหลีกเลี่ยงไฟล์ที่เสียหาย

ดาวน์โหลด * .zip solution สำหรับ angular 2.4.x: คุณต้องนำเข้า ResponseContentType จาก '@ angular / http' และเปลี่ยน responseType เป็น ResponseContentType.ArrayBuffer (โดยค่าเริ่มต้นคือ 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']);
}

สำหรับเวอร์ชันเชิงมุมที่ใหม่กว่า:

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

การดาวน์โหลดไฟล์ผ่าน ajax นั้นเป็นกระบวนการที่เจ็บปวดอยู่เสมอและในมุมมองของฉันมันเป็นการดีที่สุดที่จะให้เซิร์ฟเวอร์และเบราว์เซอร์ทำการเจรจาประเภทเนื้อหา

ฉันคิดว่าดีที่สุดที่จะมี

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

ที่จะทำมัน สิ่งนี้ไม่จำเป็นต้องมีการเปิดหน้าต่างใหม่และสิ่งนั้น

ตัวควบคุม MVC ดังตัวอย่างของคุณสามารถเป็นดังด้านล่าง:

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

ฉันใช้ Angular 4 กับวัตถุ httpClient 4.3 ฉันแก้ไขคำตอบที่พบในบล็อกทางเทคนิคของ Js ซึ่งสร้างวัตถุลิงก์ใช้เพื่อทำการดาวน์โหลดแล้วทำลายมัน

ลูกค้า:

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 ได้รับการตั้งค่าก่อนหน้านี้ให้ชี้ไปที่ api ฉันกำลังใช้สิ่งนี้เพื่อดาวน์โหลดไฟล์แนบดังนั้นฉันจึงรู้ id, contentType และชื่อไฟล์: ฉันใช้ MVC api เพื่อส่งคืนไฟล์:

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

คลาสของสิ่งที่แนบมามีลักษณะดังนี้:

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

ที่เก็บ filerep ส่งคืนไฟล์จากฐานข้อมูล

หวังว่าจะช่วยให้ใครบางคน :)

สำหรับผู้ที่ใช้ Redux Pattern

ฉันเพิ่มในโปรแกรมรักษาไฟล์เป็น @Hector Cuevas ชื่อในคำตอบของเขา ใช้ Angular2 v. 2.3.1 ฉันไม่จำเป็นต้องเพิ่มใน @ types / file-saver

ตัวอย่างต่อไปนี้คือการดาวน์โหลดวารสารเป็น PDF

การกระทำของวารสาร

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

ผลกระทบของวารสาร

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

บริการวารสาร

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

บริการ HTTP

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

The journal reducer แม้ว่านี่จะเป็นเพียงการตั้งค่าสถานะที่ถูกต้องที่ใช้ในแอปพลิเคชันของเรา แต่ฉันยังต้องการที่จะเพิ่มลงในเพื่อแสดงรูปแบบที่สมบูรณ์

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

ฉันหวังว่านี้จะเป็นประโยชน์.

ฉันแบ่งปันโซลูชันที่ช่วยฉัน (การปรับปรุงใด ๆ ที่ได้รับการชื่นชมอย่างมาก)

ในบริการ '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'));
}

ส่วนประกอบส่วนประกอบ :

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

ในส่วนองค์ประกอบคุณเรียกใช้บริการโดยไม่ต้องสมัครรับการตอบกลับ การสมัครสมาชิกสำหรับรายการประเภท mime openOffice ทั้งหมดดู: http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html

มันจะดีกว่าถ้าคุณพยายามเรียกวิธีการใหม่ภายในตัวคุณ subscribe

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

downloadFile(data)ฟังก์ชั่นภายในที่เราต้องทำ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);
    }
}

หากต้องการดาวน์โหลดและแสดงไฟล์ PDFรหัสที่คล้ายกันมากจะเป็นดังนี้:

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

นี่คือสิ่งที่ฉันทำในกรณีของฉัน -

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

วิธีแก้ปัญหาอ้างอิงจาก - ที่นี่

อัปเดตเป็นคำตอบของ Hector โดยใช้ file-saver และ HttpClient สำหรับขั้นตอนที่ 2:

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

ฉันได้วิธีแก้ปัญหาสำหรับการดาวน์โหลดจาก angular 2 โดยไม่เสียหายโดยใช้ spring mvc และ angular 2

ประเภทที่หนึ่งของฉันคือ: - ResponseEntityจากปลายจาวา ที่นี่ฉันกำลังส่งไบต์ [] อาร์เรย์มีชนิดส่งคืนจากตัวควบคุม

2nd- เพื่อรวม filesaver ในเวิร์กสเปซของคุณในหน้าดัชนีเป็น:

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

ที่ 3 ที่คอมโพเนนต์ ts เขียนโค้ดนี้:

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

                });

นี่จะให้รูปแบบไฟล์ xls ให้คุณ หากคุณต้องการรูปแบบอื่นให้เปลี่ยนประเภทและชื่อไฟล์ด้วยนามสกุลที่ถูกต้อง

ฉันกำลังเผชิญกับกรณีนี้วันนี้ฉันต้องดาวน์โหลดไฟล์ pdf เป็นไฟล์แนบ (ไฟล์ไม่ควรแสดงในเบราว์เซอร์ แต่ดาวน์โหลดแทน) เพื่อให้บรรลุว่าฉันค้นพบว่าฉันต้องได้รับไฟล์ใน Angular Blobและในเวลาเดียวกันเพิ่มContent-Dispositionส่วนหัวในการตอบสนอง

นี่เป็นวิธีที่ง่ายที่สุดที่ฉันจะได้รับ (Angular 7):

ภายในบริการ:

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

จากนั้นเมื่อฉันต้องการดาวน์โหลดไฟล์ในองค์ประกอบฉันสามารถ:

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

UPDATE:

ลบการตั้งค่าส่วนหัวที่ไม่จำเป็นออกจากบริการ

รหัสต่อไปนี้ทำงานให้ฉัน

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

ฉันพบคำตอบจนถึงขณะนี้ยังไม่มีข้อมูลเชิงลึกเช่นเดียวกับคำเตือน คุณทำได้และควรตรวจสอบความเข้ากันไม่ได้กับ IE10 + (ถ้าคุณสนใจ)

นี่คือตัวอย่างที่สมบูรณ์ที่มีส่วนแอปพลิเคชันและส่วนบริการหลังจาก โปรดทราบว่าเราได้ตั้งค่าการสังเกต: "การตอบสนอง"เพื่อตรวจจับส่วนหัวของชื่อไฟล์ นอกจากนี้โปรดทราบว่าส่วนหัวการจัดการเนื้อหาจะต้องมีการตั้งค่าและเปิดเผยโดยเซิร์ฟเวอร์ไม่เช่นนั้น Angular HttpClient ปัจจุบันจะไม่ส่งผ่าน ฉันเพิ่มส่วนหลักของ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;
}

Dotnet core พร้อมด้วย Content-Disposition & 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();
                });

เพียงแค่ใส่urlเป็นhrefดังต่อไปนี้

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

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

my_url ควรมีต้นกำเนิดเดียวกันมิฉะนั้นจะเปลี่ยนเส้นทางไปยังตำแหน่งนั้น

นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์ได้โดยตรงจากเทมเพลตที่คุณใช้แอททริบิวต์การดาวน์โหลดและ[attr.href]คุณสามารถระบุค่าคุณสมบัติได้จากส่วนประกอบ วิธีแก้ปัญหาง่ายๆนี้ควรใช้กับเบราว์เซอร์ส่วนใหญ่

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

การอ้างอิง: https://www.w3schools.com/tags/att_a_download.asp

หากคุณส่งพารามิเตอร์ไปที่ URL เท่านั้นคุณสามารถทำได้ด้วยวิธีนี้:

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

ในบริการที่ได้รับพารามิเตอร์

นี้คำตอบแนะนำว่าคุณไม่สามารถดาวน์โหลดไฟล์ด้วย AJAX โดยตรงเนื่องจากเหตุผลด้านความปลอดภัย ดังนั้นฉันจะอธิบายสิ่งที่ฉันทำในสถานการณ์นี้

01.เพิ่มhrefแอ็ตทริบิวต์ในแท็ก anchor ของคุณภายในcomponent.htmlไฟล์
เช่น: -

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

02.ทำตามขั้นตอนต่อไปนี้component.tsเพื่อข้ามระดับความปลอดภัยและนำกล่องโต้ตอบบันทึกเป็นป๊อปอัป
เช่น: -

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

หมายเหตุ: คำตอบนี้จะใช้งานได้หากคุณได้รับข้อผิดพลาด "OK" พร้อมรหัสสถานะ 200

ฉันเขียนโค้ดบางส่วนที่ได้แรงบันดาลใจจากคำตอบข้างต้นหลายข้อที่ควรทำงานได้ง่ายในสถานการณ์ส่วนใหญ่ที่เซิร์ฟเวอร์ส่งไฟล์ที่มีส่วนหัวการจัดการเนื้อหาโดยไม่มีการติดตั้งของบุคคลที่สามยกเว้น rxjs และเชิงมุม

ก่อนอื่นวิธีเรียกรหัสจากไฟล์คอมโพเนนต์ของคุณ

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

อย่างที่คุณเห็นมันเป็นการโทรแบ็กเอนด์โดยเฉลี่ยจากมุมที่ค่อนข้างจะมีการเปลี่ยนแปลงสองอย่าง

1. ฉันกำลังสังเกตการตอบสนองแทนที่จะเป็นร่างกาย
2. ฉันมีความชัดเจนเกี่ยวกับการตอบสนองเป็นหยด

เมื่อไฟล์ถูกดึงออกมาจากเซิร์ฟเวอร์ฉันเป็นหลักการมอบหมายงานทั้งหมดของการบันทึกไฟล์ไปยังฟังก์ชั่นตัวช่วยซึ่งฉันเก็บไว้ในไฟล์แยกต่างหากและนำเข้าสู่องค์ประกอบใดที่ฉันต้องการ

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

ไม่มีชื่อไฟล์ GUID ที่เป็นความลับอีกต่อไป! เราสามารถใช้ชื่อใดก็ตามที่เซิร์ฟเวอร์ให้โดยไม่ต้องระบุอย่างชัดเจนในไคลเอนต์หรือเขียนทับชื่อไฟล์โดยเซิร์ฟเวอร์ (ดังในตัวอย่างนี้) นอกจากนี้เราสามารถเปลี่ยนอัลกอริทึมของการแยกชื่อไฟล์จาก content-disposition เพื่อให้เหมาะกับความต้องการของพวกเขาได้อย่างง่ายดายและทุกอย่างอื่นจะไม่ได้รับผลกระทบ - ในกรณีที่เกิดข้อผิดพลาดระหว่างการแยกมันจะผ่าน 'null' เป็นชื่อไฟล์

ดังที่คำตอบอื่นชี้ให้เห็นแล้ว IE ต้องการการดูแลเป็นพิเศษเช่นเคย แต่ด้วยขอบโครเมียมที่จะมาในอีกไม่กี่เดือนฉันไม่ต้องกังวลเกี่ยวกับเรื่องนี้ในขณะที่สร้างแอพใหม่ (หวังว่า) นอกจากนี้ยังมีเรื่องของการเพิกถอน URL แต่ฉันก็ไม่ค่อยแน่ใจเกี่ยวกับเรื่องนั้นดังนั้นหากใครบางคนสามารถช่วยเรื่องนั้นในความคิดเห็นนั่นจะยอดเยี่ยม

หากแท็บเปิดและปิดโดยไม่ดาวน์โหลดอะไรเลยฉันลองทำตามลิงค์จำลองสมอและมันใช้ได้

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