How can I create download link in HTML?

HtmlDownload

Html Problem Overview


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?

Html Solutions


Solution 1 - Html

In modern browsers that support HTML5, the following is possible:

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

You also can use this:

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

This will allow you to change the name of the file actually being downloaded.

Solution 2 - Html

> This answer is outdated. We now have the download attribute. (see also this link to MDN)

If by "the download link" you mean a link to a file to download, use

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

the target=_blank will make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.

Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.

You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)

Solution 3 - Html

In addition (or in replacement) to the HTML5's <a download attribute already mentioned,
the browser's download to disk behavior can also be triggered by the following http response header:

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

This was the way to do before HTML5 (and still works with browsers supporting HTML5).

Solution 4 - Html

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:

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

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

Solution 5 - Html

To link to the file, do the same as any other page link:

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

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

AddType application/octet-stream EXTENSION

Solution 6 - Html

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

For pdfs:

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></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><a href="images/logo2.png" download>test pdf</a></p>

Solution 7 - Html

There's one more subtlety that can help here.

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.

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.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

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

Solution 8 - Html

The download attribute is new for the <a> tag in HTML5

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

I prefer the first one it is preferable in respect to any extension.

Solution 9 - Html

Like this

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

So a file name.jpg on a site example.com would look like this

<a href="www.example.com/name.jpg">Image</a>

Solution 10 - Html

i know i am late but this is what i got after 1 hour of search

 <?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); }
    }
    
    ?>

and for downloadable link i did this

<a href="index.php?file=file.pdf">Download PDF</a>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVenkatView Question on Stackoverflow
Solution 1 - HtmlFelix G.View Answer on Stackoverflow
Solution 2 - HtmlPekkaView Answer on Stackoverflow
Solution 3 - HtmlMyobisView Answer on Stackoverflow
Solution 4 - HtmlOdedView Answer on Stackoverflow
Solution 5 - HtmlDelan AzabaniView Answer on Stackoverflow
Solution 6 - HtmljohanView Answer on Stackoverflow
Solution 7 - HtmljhhlView Answer on Stackoverflow
Solution 8 - HtmlOdinView Answer on Stackoverflow
Solution 9 - HtmlConView Answer on Stackoverflow
Solution 10 - HtmlSikanderView Answer on Stackoverflow