blocks|key|1256217|text|在支持HTML5的现代浏览器中，以下情况是可能的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256218|<a+href="link/to/your/download/file"+download>Download+link</a>|code-block|syntax|javascript|1256219|您还可以使用以下命令：|1256220|<a+href="link/to/your/download/file"+download="filename">Download+link</a>|1256221|这将允许您更改实际正在下载的文件的名称。|1256222|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In modern browsers that support HTML5, the following is possible:</p>

<pre><code>&lt;a href="link/to/your/download/file" download&gt;Download link&lt;/a&gt;
</code></pre>

<p>You also can use this:</p>

<pre><code>&lt;a href="link/to/your/download/file" download="filename"&gt;Download link&lt;/a&gt;
</code></pre>

<p>This will allow you to change the name of the file actually being downloaded.</p>


blocks|key|1041124|text|下载链接是指向您要下载的资源的链接。它的构建方式与任何其他链接的构建方式相同：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041125|<a+href="path+to+resource.name+of+file">Link</a>

<a+href="files/installer.exe">Link+to+installer</a>|code-block|syntax|javascript|1041126|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:</p>

<pre><code>&lt;a href="path to resource.name of file"&gt;Link&lt;/a&gt;

&lt;a href="files/installer.exe"&gt;Link to installer&lt;/a&gt;
</code></pre>


blocks|key|1256147|text|要链接到该文件，请执行与任何其他页面链接相同的操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256148|<a+href="...">link+text</a>|code-block|syntax|javascript|1256149|要强制下载内容，即使它们有嵌入式插件(Windows+%2B+QuickTime+=+ugh)，您可以在htaccess+/apache2.conf中使用以下命令：|1256150|AddType+application/octet-stream+EXTENSION|1256151|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>To link to the file, do the same as any other page link:</p>

<pre><code>&lt;a href="..."&gt;link text&lt;/a&gt;
</code></pre>

<p>To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:</p>

<pre><code>AddType application/octet-stream EXTENSION
</code></pre>


blocks|key|1256311|text|这个线程现在可能已经很古老了，但是它在我的本地文件的html5中是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256312|对于pdf：|1256313|<p><a+href="file:///........example.pdf"+download+target="_blank">test+pdf</a></p>|offset|length|style|CODE|1256314|这应该会在一个新的窗口中打开pdf，并允许你下载它(至少在firefox中)。对于任何其他文件，只需将其作为文件名即可。对于图片和音乐，你可能希望将它们存储在与你的站点相同的目录中。所以这就像是|1256315|<p><a+href="images/logo2.png"+download>test+pdf</a></p>|code-block|syntax|javascript|1256316|entityMap^0|0|0|0|2A|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@$F|V|G|W|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|Y|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This thread is probably ancient by now, but this works in html5 for my local file.</p>

<p>For pdfs:</p>

<p><code>&lt;p&gt;&lt;a href="file:///........example.pdf" download target="_blank"&gt;test pdf&lt;/a&gt;&lt;/p&gt;</code></p>

<p>This should open the pdf in a new windows and allow you to download it (in firefox at least).  For any other file, just make it the filename. For images and music, you'd want to store them in the same directory as your site though. So it'd be like </p>

<pre><code>&lt;p&gt;&lt;a href="images/logo2.png" download&gt;test pdf&lt;/a&gt;&lt;/p&gt;
</code></pre>


blocks|key|1041710|text|这里还有一个更微妙的细节可以帮助你。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041711|我想有链接，既允许在浏览器中播放和显示，以及一个纯粹的下载。新的download属性很好，但并不总是有效，因为浏览器播放或显示文件的强制性仍然很强。|1041712|但是..。这是基于检查URL文件名上的扩展名！您不想摆弄服务器的扩展名映射，因为您希望以两种不同的方式传递相同的文件。因此，对于下载，您可以通过将文件软链接到对此扩展名映射不透明的名称，指向它，然后使用下载的重命名功能来修复名称来欺骗它。|1041713|​|1041714|<a+target="_blank"+download="realname.mp3"+href="realname.UNKNOWN">Download+it</a>
<a+target="_blank"+href="realname.mp3">Play+it</a>|code-block|syntax|javascript|1041715|1041716|我希望只是在末尾抛出一个虚拟查询，或者混淆扩展名，但不幸的是，它不能。|1041717|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|V|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>There's one more subtlety that can help here. </p>

<p>I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn't work all the time because the browser's compulsion to play the or display the file is still very strong. </p>

<p>BUT.. this is based on examining the extension on the URL's filename!You don't want to fiddle with the server's extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download's rename feature to fix the name. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a target="_blank" download="realname.mp3" href="realname.UNKNOWN"&gt;Download it&lt;/a&gt;
&lt;a target="_blank" href="realname.mp3"&gt;Play it&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn't. </p>


blocks|key|1041443|text|download属性是HTML5中<a>标记的新属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1041444|<a+href="http://www.odin.com/form.pdf"+download>Download+Form</a>|1041445|或|1041446|<a+href="http://www.odin.com/form.pdf"+download="Form">Download+Form</a>|1041447|我更喜欢第一个，它在任何扩展方面都是可取的。|1041448|entityMap^0|H|3|0|0|1T|0|0|0|20|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|Z|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|O|$]]

<p>The download attribute is new for the <code>&lt;a&gt;</code> tag in HTML5 </p>

<p><code>&lt;a href="http://www.odin.com/form.pdf" download&gt;Download Form&lt;/a&gt;</code>
<br>or <br>
<code>&lt;a href="http://www.odin.com/form.pdf" download="Form"&gt;Download Form&lt;/a&gt;</code></p>

<p>I prefer the first one it is preferable in respect to any extension.</p>


blocks|key|1256606|text|你可以用各种方式下载，你可以按照我的方式下载。尽管由于没有设置“允许弹出窗口”权限，文件可能无法下载，但在您的环境中，这将完美地工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1256607|​|1256608|<div+className="col-6">
++++++++++++++++++++<a++download+href="https://www.w3schools.com/images/myw3schoolsimage.jpg"+>Test+Download+</a>
++++++++++++++++</div>|code-block|syntax|javascript|1256609|1256610|由于'X-Frame-Options‘到'sameorigin’，另一个这个也会失败。|1256611|1256612|<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>|1256613|1256614|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>You can download in the various way you can follow my way. Though files may not download due to 'allow-popups' permission is not set but in your environment, this will work perfectly </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="col-6"&gt;
                    &lt;a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" &gt;Test Download &lt;/a&gt;
                &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>another one this one will also fail due to 'X-Frame-Options' to 'sameorigin'.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download&gt;
  &lt;img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142"&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1041166|text|像这样|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041167|<a+href="www.yoursite.com/theThingYouWantToDownload">Link+name</a>|code-block|syntax|javascript|1041168|因此，站点example.com上的文件name.jpg将如下所示|1041169|<a+href="www.example.com/name.jpg">Image</a>|1041170|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Like this</p>

<pre><code>&lt;a href="www.yoursite.com/theThingYouWantToDownload"&gt;Link name&lt;/a&gt;
</code></pre>

<p>So a file name.jpg on a site example.com would look like this</p>

<pre><code>&lt;a href="www.example.com/name.jpg"&gt;Image&lt;/a&gt;
</code></pre>


blocks|key|1041497|text|我知道我来晚了，但这是我找了一个小时后得到的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1041498|+<?php+
++++++$file+=+'file.pdf';

++++if+(!+file)+{
++++++++die('file+not+found');+//Or+do+something+
++++}+else+{
+++++++if(isset($_GET['file'])){++
++++++++//+Set+headers
++++++++header("Cache-Control:+public");
++++++++header("Content-Description:+File+Transfer");
++++++++header("Content-Disposition:+attachment;+filename=$file");
++++++++header("Content-Type:+application/zip");
++++++++header("Content-Transfer-Encoding:+binary");
++++++++//+Read+the+file+from+disk
++++++++readfile($file);+}
++++}

++++?>|code-block|syntax|javascript|1041499|对于可下载的链接，我这样做了|1041500|<a+href="index.php?file=file.pdf">Download+PDF</a>|1041501|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>i know i am late  but this is what i got after  1 hour of  search </p>

<pre><code> &lt;?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?&gt;
</code></pre>

<p>and for downloadable link i did this </p>

<pre><code>&lt;a href="index.php?file=file.pdf"&gt;Download PDF&lt;/a&gt;
</code></pre>


<p>I have a basic idea of HTML. I want to create the download link in my sample website, but I don't have idea of how to create it. How do I make a link to download a file rather than visit it?</p>


How can I create download link in HTML?

我对HTML有一个基本的概念。我想在我的示例网站中创建下载链接，但我不知道如何创建它。如何创建下载文件而不是访问文件的链接？

问如何在HTML中创建下载链接？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中创建下载链接？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML中创建下载链接？
EN