CODEWITHSUNDEEP
htmldownload
Venkat
Venkat

Reputation: 21490

How can I create download link in HTML?

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?

Upvotes: 305

Views: 896302

Answers (13)

Vitalicus
Vitalicus

Reputation: 1389

All images you have to download should be your own origin not a URL from other site.Browsers still does not supported cross origin downloads, it will always redirect you to the link.

Upvotes: 0

Muhammad Azam
Muhammad Azam

Reputation: 264

You can use in two ways

<a href="yourfilename" download>Download</a>

it will download file with original name In Old Browsers this option was not available

2nd

<a href="yourfilename" download="newfilename">Download</a>

Here You have option to rename your file and download with a different name

Upvotes: 4

T H
T H

Reputation: 558

If you host your file in AWS, this may work for you. The code is very easy to understand. Because the browser doesn't support same-origin download links, 1 way to solve it is to convert the image URL to a base64 URL. Then, you can download it normally.

    var canvas = document.createElement("canvas")
    var ctx = canvas.getContext('2d')

    var img = new Image()
    img.src = your_file_url + '?' + new Date().getTime();
    img.setAttribute('crossOrigin', '')

    var array = your_file_url.src.split("/")
    var fileName = array[array.length - 1]

    img.onload = function() {
        canvas.width = img.naturalWidth
        canvas.height = img.naturalHeight
        ctx.drawImage(img,
            0, 0, img.naturalWidth, img.naturalHeight,
            0, 0, canvas.width, canvas.height)

        var dataUrl = canvas.toDataURL("image/png", 1)

        var a = document.createElement('a')
        a.href = dataUrl
        a.download = fileName
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }

Upvotes: 0

Pekka
Pekka

Reputation: 449783

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.)

Upvotes: 189

jhhl
jhhl

Reputation: 151

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.

Upvotes: 2

Felix G.
Felix G.

Reputation: 6691

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.

Upvotes: 580

Sikander
Sikander

Reputation: 2835

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>

Upvotes: -8

Odin
Odin

Reputation: 1001

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.

Upvotes: 0

johan
johan

Reputation: 93

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>

Upvotes: 7

Myobis
Myobis

Reputation: 1357

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).

Upvotes: 27

Delan Azabani
Delan Azabani

Reputation: 81482

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

Upvotes: 10

Con
Con

Reputation: 368

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>

Upvotes: -2

Oded
Oded

Reputation: 499352

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>

Upvotes: 11

Related Questions