Bagaimanakah saya boleh mencipta fail dalam ingatan untuk dimuat turun oleh pengguna dan bukannya melalui pelayan?

Question

Adakah terdapat cara untuk mencipta fail teks pada bahagian klien dan menggesa pengguna untuk memuat turunnya tanpa sebarang interaksi dengan pelayan?

Saya tahu saya tidak boleh menulis terus ke komputer mereka (keselamatan, dsb.), tetapi bolehkah saya mencipta fail dan menggesa mereka untuk menyimpan?

Answer 1

Penyelesaian mudah untuk pelayar HTML5...

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<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>

Gunakan

download('test.txt', 'Hello world!');

Answer 2

Anda boleh menggunakan URI data. Sokongan pelayar berbeza-beza; lihat Wikipedia. Contoh:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Strim oktet digunakan untuk memaksa gesaan muat turun. Jika tidak, ia mungkin dibuka dalam penyemak imbas.

Untuk CSV anda boleh menggunakan:

<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>

Cuba demo jsFiddle.