如何在記憶體中建立檔案供使用者下載，而不是透過伺服器？

Question

有沒有辦法在客戶端建立文字檔案並提示使用者下載它而不與伺服器進行任何互動？

我知道我無法直接寫入他們的電腦（安全性等），但我可以建立文件並提示他們保存嗎？

Answer 1

適用於 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>

使用

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

Answer 2

您可以使用資料 URI。瀏覽器支援各不相同；請參閱維基百科。範例：

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

八位元組流用於強制下載提示。否則，它可能會在瀏覽器中開啟。

對於 CSV，您可以使用：

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

嘗試jsFiddle 示範。