Bagaimana untuk memuat turun dan membuka fail PDF menggunakan Ajax?

Memuat turun dan Membuka Fail PDF menggunakan Ajax

Dalam pembangunan web, adalah perkara biasa untuk menjana fail secara dinamik dan memuat turunnya kepada klien. Mengendalikan muat turun fail menggunakan Ajax boleh menjadi rumit, terutamanya untuk format fail seperti PDF. Satu isu biasa ialah memuat turun dan membuka fail PDF menggunakan panggilan Ajax.

Masalah:

Seorang pengguna mempunyai kelas tindakan yang menjana PDF dan menetapkan jenis kandungan yang sesuai . Mereka cuba memanggil tindakan ini melalui panggilan Ajax dan membuka fail PDF yang dimuat turun dalam penyemak imbas. Walau bagaimanapun, panggilan Ajax mengakibatkan ralat: "Penyemak imbas anda menghantar permintaan yang pelayan ini tidak dapat memahami."

Penyelesaian:

Untuk menyelesaikan isu ini dan berjaya muat turun dan buka fail PDF menggunakan Ajax, ikut langkah berikut:

1. Jana fail PDF: Dalam kelas tindakan, jana fail PDF menggunakan pustaka pilihan anda dan tetapkan yang sesuai jenis kandungan seperti yang telah anda lakukan.

2. Kendalikan panggilan Ajax dalam JavaScript:

   • Gunakan objek XMLHttpRequest untuk memulakan panggilan Ajax ke URL tindakan.
   • Tetapkan kaedah permintaan kepada "POST" atau "GET" mengikut kaedah tindakan anda.

3. Proses respons pelayan:

   • Dalam fungsi panggil balik kejayaan panggilan Ajax, kendalikan respons pelayan.
   • Gunakan Blob API untuk mencipta Blob baharu yang mewakili data PDF yang dimuat turun.
   • Buat elemen sauh () dan tetapkan atribut hrefnya kepada URL objek Blob.
   • Tetapkan atribut muat turun untuk menentukan nama fail yang dikehendaki untuk fail PDF.
   • Cetuskan peristiwa klik pada elemen utama untuk memulakan muat turun dan membuka fail PDF.

<code class="javascript">$.ajax({
  url: '<URL_TO_FILE>',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '<FILENAME_TO_SAVE_WITH_EXTENSION>';
    link.click();
  }
});</code>