Menyelesaikan Isu Muat Turun Fail JavaScript daripada ESP32 Webserver

Memahami Masalah Muat Turun Fail JavaScript dengan ESP32

Memuat turun fail daripada pelayan web kadangkala boleh menjadi rumit, terutamanya apabila berurusan dengan mikropengawal seperti ESP32. Apabila cuba memuat turun fail menggunakan JavaScript, mungkin terdapat keadaan di mana muat turun berfungsi dengan sempurna apabila diakses terus daripada penyemak imbas tetapi gagal apabila dimulakan melalui skrip.

Dalam senario ini, ESP32 menyediakan fail .CSV statik menggunakan pelayan web PsychicHTTP. Masalah timbul apabila fail tidak dimuat turun melalui JavaScript, walaupun boleh diakses melalui pautan HTML langsung dalam penyemak imbas. Isu ini boleh mengecewakan, tetapi ia adalah perkara biasa yang dihadapi apabila bekerja dengan sistem terbenam.

Kod JavaScript menggunakan XMLHttpRequest untuk meminta fail daripada ESP32, tetapi ia tidak mencetuskan muat turun seperti yang diharapkan. Artikel ini akan meneroka sebab pautan terus berfungsi tetapi kaedah JavaScript tidak berfungsi. Ia juga akan memberikan cerapan tentang cara mengubah suai JavaScript menggunakan API 'fetch' yang lebih moden untuk menyelesaikan isu ini.

Selain itu, kami akan membincangkan sama ada perubahan diperlukan dalam kod ESP32 apabila beralih daripada XMLHttpRequest kepada API pengambilan. Dengan meneliti dua soalan ini, kami akan mendedahkan masalah asas dan menyediakan penyelesaian untuk muat turun fail yang boleh dipercayai.

Menganalisis Kaedah dan Penyelesaian Muat Turun Fail JavaScript

Dalam contoh yang diberikan, matlamatnya adalah untuk memuat turun fail CSV daripada pelayan web ESP32 yang menjalankan PsychicHTTP. Skrip pertama menggunakan yang moden Ambil API, alat yang berkuasa untuk membuat permintaan HTTP dalam JavaScript. Kaedah ini memudahkan proses dengan mengendalikan janji dan lebih mudah dibaca daripada teknik lama seperti XMLHttpRequest. Permintaan pengambilan menghantar permintaan GET ke ESP32, mendapatkan semula fail dan kemudian menukarnya menjadi gumpalan format, yang penting untuk mengendalikan data binari seperti fail CSV. URL sementara kemudian dijana untuk membolehkan pengguna memuat turun fail melalui tag anchor.

Skrip kedua ialah alternatif menggunakan XMLHttpRequest, cara yang lebih tradisional untuk membuat permintaan HTTP. Walaupun XMLHttpRequest lebih lama, ia masih digunakan dalam banyak aplikasi. Dalam contoh ini, jenis respons ditetapkan kepada 'blob' untuk mengendalikan fail binari yang dikembalikan oleh pelayan. Skrip mendengar respons, dan apabila pemulangan berjaya, ia secara dinamik mencipta elemen utama untuk mencetuskan muat turun. Kaedah ini memberikan kawalan yang lebih terperinci ke atas permintaan, tetapi ia tidak mempunyai kesederhanaan dan fleksibiliti API Ambil, terutamanya apabila mengendalikan janji.

Penyelesaian ketiga ialah sandaran yang tidak memerlukan JavaScript sama sekali. Ia menggunakan tag anchor HTML dengan muat turun atribut, membenarkan pengguna mengklik pada pautan dan memuat turun fail secara automatik. Ini adalah penyelesaian paling asas dan tidak memerlukan sebarang skrip. Walau bagaimanapun, ia kurang fleksibel, kerana ia tidak membenarkan anda mengendalikan muat turun fail secara pengaturcaraan atau menambah sebarang syarat atau logik sebelum mencetuskan muat turun.

Setiap penyelesaian ini menangani kes penggunaan yang berbeza. API Ambil ialah penyelesaian yang disyorkan untuk aplikasi moden kerana kesederhanaan dan prestasinya. XMLHttpRequest berguna apabila anda memerlukan lebih kawalan ke atas permintaan dan respons. Akhir sekali, penyelesaian HTML sahaja sesuai untuk halaman web statik atau ringkas yang tidak memerlukan JavaScript. Dengan melaksanakan salah satu kaedah ini, anda boleh memastikan muat turun fail yang boleh dipercayai daripada pelayan web ESP32, meningkatkan pengalaman dan kefungsian pengguna.

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

Meneroka Perbezaan dalam Kaedah Muat Turun Fail JavaScript dan HTML

Apabila memuat turun fail melalui JavaScript, adalah penting untuk memahami cara kaedah berbeza berinteraksi dengan dasar keselamatan penyemak imbas. Salah satu sebab pautan bar alamat langsung berfungsi adalah kerana penyemak imbas boleh menyelesaikan permintaan dengan segera dan mengendalikan muat turun. Walau bagaimanapun, apabila mencuba ini melalui JavaScript, penyemak imbas menggunakan peraturan yang lebih ketat, seperti memerlukan yang betul CORS tetapan (Perkongsian Sumber Silang Asal). Tanpa tetapan tiada kor atau kor mod dengan betul, muat turun mungkin tidak berlaku.

Di samping itu, pelayar moden lebih suka menggunakan fetch() API berbanding kaedah lama seperti XMLHttpRequest, kerana ia memberikan lebih kawalan ke atas cara respons dikendalikan, terutamanya untuk gumpalan atau objek seperti fail. Ia juga mengendalikan ralat dengan lebih anggun, menjadikannya penyelesaian yang lebih dipercayai untuk memuat turun fail secara dinamik. Menetapkan jenis MIME yang betul adalah satu lagi faktor utama dalam memastikan fail dikendalikan dengan betul oleh pelanggan.

Untuk aplikasi seperti memuat turun daripada an ESP32, adalah penting untuk memastikan pelayan mengendalikan permintaan dan respons dengan betul, menyediakan jenis dan pengepala MIME yang betul. API Ambil juga membolehkan pengendalian janji yang lebih baik, yang amat berguna dalam persekitaran tak segerak seperti memuat turun fail, memastikan pengalaman pengguna kekal lancar dan responsif.