如何在不與伺服器互動的情況下使用 JavaScript 在客戶端下載檔案？

如何使用 JavaScript 在沒有伺服器互動的情況下下載檔案

建立使用者可以下載的檔案時，安全問題通常會阻止直接寫入其電腦。不過，可以在不涉及伺服器的情況下建立文件並提示使用者儲存。

HTML5 解決方案

對於支援 HTML5 的瀏覽器，可以使用以下程式碼：

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);
}

用法

在 HTML程式碼中使用此函數如下：

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

當使用者在表單中輸入文件名稱和文件內容並點擊「下載」按鈕時，將下載文件，而無需與伺服器互動。

以上是如何在不與伺服器互動的情況下使用 JavaScript 在客戶端下載檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！