Bagaimana untuk Berjaya Muat Turun Fail dari Apl WebApi/MVC Anda dalam Angular2?

Muat Turun Fail Berkesan dengan Angular2

Dalam aplikasi Angular2 anda, anda telah menghadapi kesukaran menyimpan fail yang dimuat turun daripada apl WebApi / MVC anda. Mari kita mendalami isu anda dan berikan penyelesaian.

Kod komponen anda, seperti yang disediakan, menggunakan pembina Blob() untuk mencipta fail daripada data yang diterima. Walau bagaimanapun, anda menghadapi cabaran dengan fungsi URL.createObjectURL, yang tidak tersedia dalam spesifikasi ECMAScript semasa.

Penyelesaian berpunca daripada sifat boleh diperhatikan dalam Angular2 . Pemerhatian yang digunakan untuk memuat turun fail dilaksanakan dalam konteks yang berbeza, mengakibatkan isu yang anda hadapi. Untuk menangani perkara ini, kami perlu mengubah suai kod untuk melanggan observable dan melaksanakan penciptaan fail dan menyimpan logik dalam langganan tersebut.

Satu pendekatan yang berkesan ialah memfaktorkan semula kaedah muat turun() anda untuk melanggan observable sebagai berikut:

downloadfile(type: string){
  this.pservice.downloadfile(this.rundata.name, type)
    .subscribe(data => {
      this.downloadFile(data); // Call a separate function to handle file creation and saving
    },
    error => console.log("Error downloading the file."),
    () => console.log('Completed file download.'));
}

Dalam kaedah yang dikemas kini ini, kami memperkenalkan fungsi downloadFile() baharu yang bertanggungjawab untuk mencipta fail dan memulakan muat turun.

downloadFile(data: Response) {
  const blob = new Blob([data], { type: "application/octet-stream" });
  const url = window.URL.createObjectURL(blob);
  window.open(url);
}

Dengan melanggan fungsi yang boleh diperhatikan dan mentakrifkan muat turunFail(), kami memastikan penciptaan dan penyimpanan fail berlaku dalam konteks yang betul, membolehkan anda menyimpan dan membuka fail yang dimuat turun dengan jayanya.

Atas ialah kandungan terperinci Bagaimana untuk Berjaya Muat Turun Fail dari Apl WebApi/MVC Anda dalam Angular2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!