web-dev-qa-db-ja.com

ダウンロードリンクをHTMLで作成する方法

HTMLの基本的な考え方があります。サンプルWebサイトにダウンロードリンクを作成したいのですが、作成方法がわかりません。ファイルを訪問するのではなく、ダウンロードするためのリンクを作成する方法を教えてください。

htmldownload
196
Venkat

この答えは古くなっています。 here で説明されているように、download属性が追加されました。

「ダウンロードリンク」によってダウンロードするファイルへのリンクを意味する場合は、

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

target=_blankはダウンロードが始まる前に新しいブラウザウィンドウを表示させます。ブラウザがリソースがファイルのダウンロードであることを発見すると、そのウィンドウは通常閉じられます。

ブラウザに認識されているファイルタイプ（JPGやGIF画像など）は、通常ブラウザ内で開かれます。

あなたは正しいヘッダーを送ってダウンロードを強制することを試みることができます。 ここに 。 （そのためには、サーバーサイドのスクリプト作成またはサーバー設定へのアクセスが必要です。）

140
Pekka 웃

HTML5をサポートする最近のブラウザでは、次のことが可能です。

<a href="link/to/your/download/file" download>Download link</a>

これを使うこともできます。

<a href="link/to/your/download/file" download="filename">Download link</a>

これにより、実際にダウンロードされているファイルの名前を変更することができます。

404
Felix G.

既に述べたHTML5の<a download属性に加えて（または代わりに）、
ブラウザの ディスクへのダウンロード の振る舞いは、以下のhttpレスポンスヘッダによっても引き起こされる可能性があります。

Content-Disposition: attachment; filename=ProposedFileName.txt;

これはHTML 5より前の方法です（それでもHTML 5をサポートしているブラウザでも動作します）。

19
Myobis

ダウンロードリンクは、ダウンロードしたいリソースへのリンクです。他のリンクが次のようになるように同様に構成されています。

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>
9
Oded

ファイルにリンクするには、他のページリンクと同じようにします。

<a href="...">link text</a>

組み込みプラグイン（Windows + QuickTime = ugh）があってもダウンロードを強制するには、これをあなたのhtaccess/Apache2.confで使うことができます：

AddType application/octet-stream EXTENSION
8
Delan Azabani

このスレッドはおそらく今では古くなっていますが、これは私のローカルファイル用のhtml5で機能します。

Pdfsの場合：

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

これは新しいウィンドウでpdfを開き、あなたがそれをダウンロードすることを可能にするべきです（少なくともFirefoxで）。他のファイルの場合は、ファイル名にするだけです。画像や音楽の場合は、あなたのサイトと同じディレクトリに保存したいでしょう。だからそれはのようになるでしょう

<p><a href="images/logo2.png" download>test pdf</a></p>
3
johan

Download属性はIEでは機能しません。「download」を完全に無視します。 hrefがリモートサイトを指している場合、ダウンロードはFirefoxで機能しません。そのため、Odinの例はFirefox 41.0.2では機能しません。

1
Bill Coffin

あなたは私のやり方に従うことができる様々な方法でダウンロードできます。 「allow-popups」権限が設定されていないためにファイルがダウンロードされない場合がありますが、環境内では完全に機能します

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

もう1つは、「X-Frame-Options」から「sameorigin」が原因で失敗します。

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
0
anik islam Shojib

Download属性は、HTML 5の<a>タグの新機能です。

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
または
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

私はそれがどんな拡張に関しても好ましい最初のものを好む。

0
Odin