アンカーやサーバーサイドコードを使用せずに HTML/JavaScript でファイルのダウンロードをトリガーするにはどうすればよいですか?

HTML ボタンまたは JavaScript を使用してファイルのダウンロードをトリガーする方法

質問: HTML ボタンをクリックするか実行したときにファイルのダウンロードをトリガーするにはどうすればよいですか?アンカー、バックエンド スクリプト、またはサーバーの変更を使用しない JavaScript headers?

HTML メソッド:

HTML5 のダウンロード属性は、アンカー タグ () に適用されるとファイルのダウンロードを有効にします。ファイルへのパスと提案されたファイル名を次のように指定します。

<a href="path_to_file" download="proposed_file_name">Download</a>

制限事項:

ファイルはページと同じオリジンに存在する必要があることに注意してください。 (つまり、同じドメイン、サブドメイン、プロトコル、およびポート)。例外には、blob:、data:、および file: が含まれます。ファイルの実際の名前を使用するには、projected_file_name を空白のままにしておきます。

JavaScript メソッド:

JavaScript 経由でダウンロードをトリガーするには、次のコードを使用できます:

const downloadElement = document.getElementById("file-request");
downloadElement.addEventListener("click", () => {
    const link = document.createElement("a");
    link.setAttribute("href", "path_to_file");
    link.setAttribute("download", "proposed_file_name");
    link.click();
});

このコードは、非表示のアンカー要素を作成し、そのダウンロード属性を設定し、そのアンカー要素をクリックしてシミュレーションを開始します。ダウンロード。

追加の注意事項:

• サーバーがファイルのダウンロードを処理するように適切に構成されていることを確認してください。
• 詳細については、次を参照してください。ダウンロードに関する MDN ドキュメント、ダウンロードに関する HTML 標準、ダウンロード属性に関する HTML 標準、およびブラウザーの CanIUse互換性。

以上がアンカーやサーバーサイドコードを使用せずに HTML/JavaScript でファイルのダウンロードをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。