574

これはばかげていますが、これを行う方法がわかりません。単語があまりにも一般的であるため、検索エンジンで必要なものを見つけるのは困難です. これは答えやすいものであるべきだと思います。

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

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

しかし、HTMLボタンを使用したいのですが、たとえば次のいずれかです。

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

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

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

ボタンのようなアンカーを作成したり、バックエンド スクリプトを使用したり、サーバー ヘッダーや MIME タイプをいじったりする方法を探しているわけではありません。

4

24 に答える 24

581

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

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

どこ：

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

ドキュメント: MDN、ダウンロードに関するHTML 標準、に関する HTML 標準download、CanIUse

于 2013-09-07T22:54:45.253 に答える
330

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

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
于 2012-07-23T21:26:19.057 に答える
111

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
于 2013-09-07T18:57:46.823 に答える
73

jQueryの場合：

$("#fileRequest").click(function() {
    // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
于 2012-07-23T21:23:49.760 に答える
13

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

<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);
}
于 2017-03-22T19:28:34.617 に答える
8

どうですか：

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
于 2013-07-22T03:23:04.080 に答える
1

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

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

これは確実に効きます！

于 2016-05-25T17:12:04.287 に答える
0

お望みならば

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

それ以外の場合はブラウザによってレンダリングされるファイルをダウンロードする機能のために、それでもボタンで使用するきちんとした JavaScript 関数が必要です。HTMLで目に見えないリンクを作成し、JavaScriptでクリックすることができます。

function download_file() {
  document.getElementById("my_download").click()
}
<a id="my_download" href="path_to_file" download="file_name" style="display:none;"></a>

<button onClick="download_file()">Download!!!</button>

于 2022-01-10T15:44:15.440 に答える
-11

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

<a href="http://www.example.com/folder1/file.doc">Download</a>
于 2012-07-23T21:27:52.257 に答える