HTML ボタンまたは JavaScript をクリックしたときにファイルのダウンロードをトリガーするにはどうすればよいですか?

現在、多くのアプリケーションでユーザーはファイルを アップロード および ダウンロード できます。たとえば、盗作検出ツールを使用すると、ユーザーはテキストを含むドキュメント ファイルをアップロードできます。次に、盗作がないかチェックし、ユーザーがダウンロードできるレポートを生成します。

入力タイプ ファイルを使用してファイル アップロード ボタンを作成することは誰もが知っていますが、JavaScript/JQuery を使用してファイル ダウンロード ボタンを作成する方法を知っている開発者はほとんどいません。

このチュートリアルでは、HTML ボタンまたは JavaScript がクリックされたときにファイルのダウンロードをトリガーするさまざまな方法を説明します。

HTML の タグと download 属性を使用して、ボタンがクリックされたときにファイルのダウンロードをトリガーします

タグに download 属性を追加すると、 タグをファイルのダウンロード ボタンとして使用できます。ユーザーがリンクをクリックしたときに特定のファイルをダウンロードできるようにするには、ファイルの URL を href 属性の値として渡す必要があります。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って タグを使用してファイルのダウンロード ボタンを作成できます。

リーリー

上記の構文では、ダウンロード属性とファイル名をダウンロード属性の値として追加しました。

パラメータ

• file_path

  – これは、ユーザーにダウンロードしてもらいたいファイルへのパスです。

例 1

は次のように翻訳されます:

例 1

以下の例では、HTML

タグの href 属性の値として画像 URL を渡しています。ダウンロード ボタンを

タグのアンカー テキストとして使用します。 ユーザーがボタンをクリックするたびに、ファイルのダウンロードがトリガーされることがわかります。 リーリー

window.open() メソッドを使用する

window.open() メソッドは、新しいタブで URL を開きます。 URL を open() メソッドのパラメータとして渡すことができます。

open() メソッドで URL を開けない場合、ファイルのダウンロードがトリガーされます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って window.open() メソッドを使用して、ファイルのダウンロード ボタンを作成できます。

リーリー

上記の構文では、ファイル URL を window.open() メソッドのパラメーターとして渡します。

例 2

以下の例では、ユーザーがボタンをクリックするたびに、downloadFile() 関数がトリガーされます。 downloadFile() 関数では、window.open() メソッドがファイルのダウンロードをトリガーします。

リーリー

ユーザー入力を取得し、その入力を使用してファイルを作成し、ユーザーがファイルをダウンロードできるようにします

このメソッドを使用すると、ユーザーは入力ボックスにテキストを書き込むことができます。その後、入力したテキストを使用して新しいファイルを作成し、ユーザーがファイルをダウンロードできるようにします。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従ってカスタム テキストを含むファイルを作成し、ユーザーがそれをダウンロードできるようにすることができます。

リーリー

上記の構文では、テキストをエンコードしてファイルに追加し、 タグを使用して作成しました。

＃＃＃アルゴリズム＃＃＃

ステップ 1

- HTML 入力にアクセスしてテキストを取得します。

• ステップ 2

  - JavaScript createElement() メソッドを使用してカスタム HTML タグを作成します。

  ステップ 3
- setAttribute() メソッドを使用して、hidden_​​a HTML 要素の href 属性を設定します。エンコードされたテキストを href 属性の値として使用します。

• ステップ 4
- setAttribute() メソッドを再度使用し、ダウンロード属性を隠し要素 hidden_​​a のダウンロード ファイル名の値に設定します。

• ステップ 5
- hidden_​​a 要素を本文に追加します。

• ステップ 6
- click() メソッドを使用して、hidden_​​a 要素のクリックをトリガーします。 click() メソッドを呼び出すと、ダウンロードが開始されます。

• ステップ 7
- RemoveChild() メソッドを使用して、ドキュメント本文から hidden_​​a 要素を削除します。

• 例 3

  の中国語訳は次のとおりです:
例 3

• 以下の例では、ユーザーは入力フィールドに任意のカスタム テキストを入力し、ボタンをクリックして JavaScript を使用してファイルのダウンロードをトリガーできます。ファイルのダウンロードをトリガーするために上記のアルゴリズムを実装しました。 リーリー

axios ライブラリを使用してファイルのダウンロード ボタンを作成する

axios ライブラリを使用すると、任意の URL からデータを取得できます。したがって、任意の URL またはファイル パスからデータを取得し、そのデータを タグの href 属性の値として設定します。さらに、setAttribute() メソッドを使用して download 属性を タグに追加し、click() メソッドを使用してファイルのダウンロードをトリガーします。

＃＃＃文法＃＃＃

ユーザーは axios と JavaScript を使用して、次の構文に従ってファイルのダウンロードをトリガーできます。

リーリー

上記の構文では、axios.get() メソッドを使用して、result 変数に格納されている file_path からデータを取得できます。その後、新しい Blob() コンストラクターを使用してデータを Blob オブジェクトに変換します。

例 4

の中国語訳は次のとおりです:

例 4

以下の例では、axios を使用して URL からデータを取得し、それを Blob オブジェクトに変換し、href 属性の値として設定します。

その後、JavaScript 経由で 要素をクリックして、ファイルのダウンロードをトリガーしました。

ああああ

以上がHTML ボタンまたは JavaScript をクリックしたときにファイルのダウンロードをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。