web-dev-qa-db-ja.com

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

これは気が狂いますが、私はこれを行う方法がわかりません、そして言葉がどれほど一般的であるので、私が検索エンジンで必要なものを見つけるのは難しいです。私はこれが答えるのが簡単なはずだと思っています。

私はこれと同じことをする簡単なファイルのダウンロードが欲しいです：

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

しかし、私はHTMLボタンを使いたい。これらのどちらか：

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

同様に、JavaScriptを介して単純なダウンロードを引き起こすことは可能ですか？

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

私は間違いなく not ボタンのように見えるアンカーを作成する方法、バックエンドスクリプトを使用する方法、またはサーバーヘッダーやMIMEタイプを台無しにする方法を探しています。

javascripthtmldownload
353
brentonstrine

あなたができるボタンのために

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

私はいくつかの調査をしましたが、最良の答えを見つけました。新しいHTML5のdownload属性を使ってダウンロードを開始することができます。

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

どこで：

  • path_to_fileは絶対パスまたは相対パスです。
  • proposed_file_nameは、保存先のファイル名です（空白でも構いません。デフォルトは実際のファイル名です）。

これが役に立つことを願っています。

Whatwgドキュメンテーション

使ってもいいですか

377
Joe Pigott

JQueryの場合：

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

HTML：

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

あなたは目に見えないiframeで「トリック」でそれをすることができます。あなたがそれに "src"を設定すると、ブラウザはあたかもあなたが同じ "href"を持つリンクをクリックするかのように反応する。 formを使った解決策とは反対に、それはあなたが追加のロジックを埋め込むことを可能にします。

window.openを使ったときのように新しいウィンドウ/タブを点滅させることもありません。

HTML：

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

Javascript：

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

古いスレッドですが、単純な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)
16
Stefanos Chrs

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

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

ドキュメント化されたBootstrap 4 docs で、Bootstrap 3でも動作します。

12
CFP Support

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

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

どうですか？

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

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

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

あなたがVanilla 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>
3
David Willhite
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

Safariでは機能しないようですが、Chromeでは機能しました。また、ユーザーがクリックしたときにリンクのhref属性を変更すると、古いバージョンのIEでは機能するようになりましたが、最新バージョンのIEまたはEdgeでは機能しませんでした。

1
IamGuest

<body>タグと</body>タグの間の任意の場所に、次のコードを使用してボタンを配置します。

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

これはきっとうまくいくでしょう！

1
Ronaldo

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

フォームのアクション属性を更新するための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>

以下は _が_ workしなかった：

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

あなたがformを使うことができないならば、 downloadjs を使った別のアプローチは/ fit。 Downloadjsは、内部でblobとhtml 5ファイルAPIを使用しています。

{downloadjs（url、filename）}）/>

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

1
Gleb Dolzikov

file.doc?foo=bar&jon=doeのような複雑なURLがある場合の別の方法は、フォーム内に隠しフィールドを追加することです。

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

完成していない@Cfreakの回答に触発

0
Bellash

ダウンロード属性

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

あなたは単に使用することができます：

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>

0
MartinNajemi