サーバーとの対話なしで 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 中国語 Web サイトの他の関連記事を参照してください。