Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Muat Turun Bahagian Klien Fail Menggunakan JavaScript Tanpa Interaksi Pelayan?

Bagaimanakah Saya Boleh Muat Turun Bahagian Klien Fail Menggunakan JavaScript Tanpa Interaksi Pelayan?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-29 03:00:11144semak imbas

How Can I Download a File Client-Side Using JavaScript Without Server Interaction?

Cara Muat Turun Fail Tanpa Interaksi Pelayan Menggunakan JavaScript

Apabila mencipta fail yang boleh dimuat turun oleh pengguna, kebimbangan keselamatan biasanya menghalang penulisan terus ke mesin mereka. Walau bagaimanapun, adalah mungkin untuk mencipta fail dan menggesa pengguna untuk menyimpannya tanpa melibatkan pelayan.

Penyelesaian HTML5

Untuk penyemak imbas yang menyokong HTML5, anda boleh menggunakan kod berikut:

function download(filename, text) {
  // Create an anchor element pointing to the file's content
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  // Hide the anchor element
  element.style.display = 'none';

  // Append the element to the body to enable the download
  document.body.appendChild(element);

  // Simulate a click event to trigger the download
  element.click();

  // Remove the anchor element to prevent further interaction
  document.body.removeChild(element);
}

Penggunaan

Gunakan fungsi ini dalam kod HTML anda sebagai berikut:

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Apabila pengguna memasukkan nama fail dan kandungan fail ke dalam borang dan mengklik butang "Muat turun", fail tersebut akan dimuat turun tanpa interaksi dengan pelayan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Muat Turun Bahagian Klien Fail Menggunakan JavaScript Tanpa Interaksi Pelayan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn