HTMLボタンまたはJavaScriptをクリックしたときにファイルのダウンロードをトリガーする方法

434

これはおかしいですが、どうすればよいかわかりません。また、単語が一般的であるため、検索エンジンで必要なものを見つけるのが困難です。これは答えやすいものだと思います。

これと同じことを行う簡単なファイルのダウンロードが必要です：

<a href="file.doc">Download!</a>

しかし、私はHTMLボタンを使用したいと思っています。

<input type="button" value="Download!">
<button>Download!</button>

同様に、JavaScriptを介して単純なダウンロードをトリガーすることは可能ですか？

$("#fileRequest").click(function(){ /* code to download? */ });

ボタンのように見えるアンカーを作成したり、バックエンドスクリプトを使用したり、サーバーヘッダーやMIMEタイプを混乱させる方法を探しているのは間違いありません。

javascript html download

— ブレントンストリン
ソース

15

あなたのおかげで、「JavaScriptでファイルのダウンロードをトリガーする方法」は、今後の検索者にはるかに速く答えを与えるでしょう。

— ダニューブセーラー

278

あなたができるボタンについて

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

— 変な
ソース

formタグを保存して、onclickをbuttonタグに追加するだけです。

— Florian Leitgeb 2015年

12

トリガーとしては機能せず、「a」タグとしてURLにリダイレクトするだけです。

— fdrv

7

これはよりうまく機能します：<a href="path_to_file" download="proposed_file_name">ダウンロード</a>

— kscius 16/07/17

11

@kscius今日でもダウンロード属性はIE 11ではサポートされておらず（現在Edgeでサポートされています）、Safariではサポートされていません。回答が最初に投稿された2012年には、主要なブラウザではサポートされていませんでした。

— Cfreak 2016

1

ボタンスタイルのアンカーとボタンのあるフォームの違いは何ですか？

— Andrei Epure 2017

444

HTML5 download属性を使用してダウンロードをトリガーできます。

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

どこ：

path_to_file同じオリジンの URL に解決されるパスです。つまり、ページとファイルは同じドメイン、サブドメイン、プロトコル（HTTPとHTTPS）、およびポート（指定されている場合）を共有する必要があります。例外はblob:and data:（これは常に機能します）とfile:（これは機能しません）です。
proposed_file_name保存先のファイル名です。空白の場合、ブラウザはデフォルトでファイル名を使用します。

ドキュメント：MDN、ダウンロード時のHTML標準download、HTML標準、CanIUse

— ジョー・ピゴット
ソース

37

Safariおよび特定のIEバージョンでは機能しない

— Mohamed Hussain

4

との組み合わせを使用することでdownload、target="_blank"ほとんどのユースケースに対応できます。理解できるブラウザはdownloadそれをダウンロードとして扱い、そうでなければ新しいタブで開かれます。

— MK10 2017年

10

これを単なるタグではなくボタンオブジェクトに適用するにはどうすればよいですか？

— storm_m2138 2017年

8

実際、これはMDNドキュメントで言及されているように、同じオリジンのURLに対してのみ機能します。一般的なソリューションの開発を検討している場合、これは大きな制限です

— Akshat Gupta

6

質問は、リンクの代わりにボタンを使用することを明示的に求めています

— Quentin

86

HTML：

<button type="submit" onclick="window.open('file.doc')">Download!</button>

— 眠い
ソース

8

最良かつ最もクリーンなソリューション。ただし、ここでは追加のJavascriptは必要ありません。onclickを含むHTML部分で十分です。

— Florian Leitgeb 2015年

4

XMLファイルをダウンロードしたい場合はどうすればよいですか？

— g07kore

2

コードをありがとう。私はテストしましたが、IE、Chrome、Firefoxで動作します。

— muthukumar 2016

6

PDFのようなブラウザで受け入れ可能なファイルがある場合は、ダウンロードダイアログを表示する代わりに新しいタブで開きます。

— WindRider 2017年

1

window.openはブラウザでポップアップブロックをトリガーする可能性があるため、お勧めしません。同じブラウザウィンドウ内の場所に移動しますが、window.location = 'path'を使用できます。

— Elendurwen

68

jQueryの場合：

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

— マットボール
ソース

1

パーフェクト、ありがとう。ほとんどのサーバーがデフォルトでContent-Dispositionを「attachment」に設定するかどうかを知っていますか？

— brentonstrine

5

「ほとんど」はありません。それは完全に依存します。設定されていることに依存しないでください。

— マットボール

3

この問題が私を弾道に駆り立てており、これが機能した唯一のオプションでした（IEでサポートされています）。私のようなn00bsに追加して、Content-Dispositionを設定します。必要なのは次のとおりです。<？php header（ 'Content-Disposition：attachment; filename = "filename.here"'）; ？>

— user124384 2015

3

jqueryはありません。限目。

— アダムArold

1

画像をダウンロードしようとすると、これは機能しません。ブラウザで画像を開きます

— Dheeraj

34

古いスレッドですが、単純なjsソリューションがありません：

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

— ステファノスChrs
ソース

24

@NicholasKyriakides種類はこの宝石を思い出させます：image.ibb.co/dtkUWJ/Selection_002.png

— Stefanos Chrs

@BryanLarsen FFのどのバージョン？

— Stefanos Chrs

1

@BryanLarsenそうです、Firefoxは最初にbody要素を追加しないとこれを許可しません。ありがとう、回答を更新してください

— Stefanos Chrs

1

ダウンロードが完了したらJavaScript関数をトリガーする方法はありますか？ダウンロードが開始したらメッセージを表示し、ダウンロードが完了したらメッセージを削除しようとするだけです。

— mohitバンサル

1

@mohitbansal（un）残念ながら、ブラウザレベルにあるため、ありません

— Stefanos Chrs

23

あなたは目に見えないiframeで「トリック」でそれをすることができます。"src"を設定すると、ブラウザは同じ "href"のリンクをクリックするように反応します。フォームを使用するソリューションとは逆に、タイムアウト後にダウンロードをアクティブ化する、いくつかの条件が満たされた場合などに、追加のロジックを埋め込むことができます。

また、非常に静かで、を使用する場合のように、新しいウィンドウやタブが点滅することはありませんwindow.open。

HTML：

<iframe id="invisible" style="display:none;"></iframe>

JavaScript：

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

— ダヌビアンセーラー
ソース

少なくとも、実際にiframeをdocument.bodyに適用する場合はそうです。

— yxhuvud 2016年

1

以前は機能していましたが、現在Chromeでは機能していないようです。Chromeのさまざまなバージョンで動作しなくなるのではないかと思います。

— Dobes Vandermeer

バージョン61.0.3163.100以降のChromeで動作します（公式ビルド）（64ビット）

— AndrewBenjamin '25

Firefox v57の画像では機能しません。画像をiframeにレンダリングするだけです。

— アントニー

15

ブートストラップバージョン

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

文書化されたブートストラップ4ドキュメントでは、同様にブートストラップ3で動作します。

— CFPサポート
ソース

9

これがBootstrapと関係している唯一のことは、クラス名です。これは、HTML5のパワーにすぎません。

— マチャド

3

問題は、リンクの代わりにボタンを使用してこれを行う方法を明確に尋ねることです。

— クエンティン

2

ブートストラップについて少しでも知っていれば、それがボタンであることがわかります。

— ジョンロード

11

これはあなたが探していた解決策だと思います

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

JavascriptがCSVファイルを生成するケースがありました。ダウンロードするリモートURLがないため、次の実装を使用します。

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

— デルコニス
ソース

404->ページが404エラーページに変わります。他のlocation.hrefソリューションで述べたのと同じ問題。

— BananaAcid

9

何について：

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

— オリ
ソース

5

これは、たとえばファイルが画像の場合、ブラウザで開かれるだけなので機能しません。

— ジャガーノート

別の問題が発生します。ファイルが欠落していると、ページ全体が404ページに移動します

— Hugheth

7

ダウンロードリンクを非表示にして、ボタンをクリックすることができます。

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

— Starwarswii
ソース

これがFirefoxで機能するためには、リソースがドキュメントと同じドメインにある必要があります。CORSヘッダーの設定は役に立ちません。

— アントニー

2

これを行わないでください

— Wannes

@Wannesなんで？

— Starwarswii、

4

JavaScript（jQueryなし）の標準的なソリューションを探していて、HTML5属性を使用しない場合は、これを試すことができます。

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

スニペットを展開

— デイビッド・ウィライト
ソース

1

これは、ダウンロードされるファイルがページのロード時に決定されたため、最終的に私にとってうまくいきました。

フォームのaction属性を更新するJS：

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

JSを呼び出してフォームのaction属性を更新します。

<body onLoad="setFormAction();">

送信ボタン付きのフォームタグ：

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

以下は機能しませんでした：

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

— スレイヤーノア
ソース

おそらく、ロード時にファイルがある場合、テンプレートエンジンを使用してサーバー上でアクションをレンダリングできないのでしょうか。なぜjsコードが必要なのですか？

— Andrei Epure 2017

1

フォームを使用できない場合は、downloadjsを使用した別のアプローチが適しています。Downloadjsは、内部でblobおよびhtml 5ファイルAPIを使用します。

{downloadjs（url、filename）}）/>

* jsx / react構文ですが、純粋なhtmlで使用できます

— グレブ・ドルジコフ
ソース

他のドメインの画像に関するCORSの問題を回避するには、次のように、imgタグにcrossorigin = "anonymous"を挿入します。<img src = "image.png" crossorigin = "anonymous" />

— Jonathan Harris

0

タグ<body>と</body>タグの間のどこかに、以下のコードを使用してボタンを配置します。

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

これはきっとうまくいきます！

— ロナルド
ソース

1

Chromeの場合、これは優れたソリューションです

— Hayk Aramyan

1

Safariでも機能しない：W3スクール

— アレックス

2

MSブラウザーで動作しないことはかなり大きな問題であり、Chromeが常に答えになるとは限りません。

— SudoKid 2017年

HTML内のボタン内にリンクを配置することはできません

— Quentin

0

file.doc?foo=bar&jon=doeフォーム内に非表示フィールドを追加するなど、複雑なURLがある場合の別の方法

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

完了していない@Cfreakの回答に触発されました

— ベラッシュ
ソース

0

テキストなしでリンク付きのタグを追加できます。コードのようにボタンをクリックしたら、$（ "yourlinkclass"）。click（）関数を実行するだけです。

— ThisisFish
ソース

-1

ダウンロード属性はそれを行う

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

— ロハラハタミ
ソース

2

私はあなたの答えが好きです

— ジョージC.

2

問題は、リンクの代わりにボタンを使用してこれを行う方法を明確に尋ねることです。

— クエンティン

-6

<a>タグを使用する場合は、ファイルにつながるURL全体を使用することを忘れないでください-つまり：

<a href="http://www.example.com/folder1/file.doc">Download</a>

— マーク
ソース

ここでは問題ではないと思います。また、リンクがファイルと同じパスにある場合、「絶対」パスは必要ありません。

— ロケットハズマット

@Rocket-もちろん、絶対パスについては正しいですが、それが正しいことを確認するための最良の方法です。それが役に立ったかどうかを判断するのはOPにお任せします

— マーク

問題は、リンクの代わりにボタンを使用してこれを行う方法を明確に尋ねることです。

— クエンティン

このソリューションにはダウンロード属性がありません。ダウンロード属性を追加した後でも、クロスドメインでは機能しません。

— s sharif

-6

私にとっては、アンカーテキストの代わりにボタンを追加すると、非常にうまくいきます。

<a href="file.doc"><button>Download!</button></a>

ほとんどのルールでは問題ないかもしれませんが、かなり見栄えがします。

— ブラナ
ソース

5

これはブラウザが.docファイルをサポートしていないためにのみ機能します。

— Adrianによるデザイン

HTMLが無効です。<a>要素に要素を含めることはできません<button>。

— クエンティン

いつもそうだったの？あなたがそれをコメントしたとき、この答えは2歳でした。

— ジョンロード