Bagaimana untuk memuat turun fail dalam Angular2?

Memuat Turun Fail dalam Angular2

Anda menghadapi kesukaran semasa melaksanakan muat turun fail menggunakan Angular2. Secara khusus, anda tidak dapat memahami cara menyimpan data yang diterima dan mencetuskan fungsi simpan fail. Mari kita terokai cara ini boleh dicapai dalam Angular.

Isunya

Isu utama dalam kod anda ialah pemerhatian yang digunakan untuk memuat turun fail dijalankan dalam konteks yang berasingan . Ini membawa kepada objek kosong apabila cuba mencipta pembolehubah URL menggunakan window.URL.createObjectURL. Untuk menyelesaikan isu ini, kita perlu memastikan bahawa objectURL dibina dalam konteks yang betul.

Penyelesaian

Satu penyelesaian yang berkesan untuk masalah ini ialah dengan melanggan boleh diperhatikan dan menghantar data kepada fungsi berasingan yang mengendalikan muat turun fail. Ini boleh dicapai dengan kod berikut:

this._reportService.getReport().subscribe((data) => this.downloadFile(data));

Fungsi muat turunFail ditakrifkan seperti berikut:

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

Dalam fungsi ini, kami mencipta objek gumpalan dengan data tindak balas dan nyatakan jenis fail. Kemudian, kami menjana objectURL dan membuka tetingkap baharu untuk memuat turun fail.

Pertimbangan Tambahan

Adalah penting untuk memastikan modul 'rxjs/Rx' diimport dengan betul. Untuk menggunakan ciri yang boleh diperhatikan seperti 'langgan,' anda mungkin perlu memasukkan baris berikut di bahagian atas komponen anda:

import 'rxjs/Rx';

Kesimpulan

Oleh melanggan yang boleh diperhatikan dan menghantar data kepada fungsi khusus yang mencipta objectURL, anda boleh berjaya memuat turun fail dalam Angular2 dan ke atas. Kaedah ini membolehkan anda mempunyai kawalan yang lebih besar ke atas proses muat turun dan mengendalikan data dalam konteks yang betul.

Atas ialah kandungan terperinci Bagaimana untuk memuat turun fail dalam Angular2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!