How do I trigger a file download when I press on a div in HTML?

Question

How do I trigger a file download when a person presses on a div that has a background image?

CSS:

.button{
background-size:  100% 100%;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 17%;    
bottom: 0;

}

HTML:

<div class="button">

</div>

Where do I have to put the file in order for the download to commence? Thank you in advance. The file name is "TheFile.pdf"

Have you tried these answers? http://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript — Amodar, Apr 08 '17 at 21:18

score 2 · Accepted Answer · answered Apr 08 '17 at 21:21

You can wrap the div in an a tag and then put the file on there with the download attribute. For example:

<a href="theFile.pdf" download>
    <div class="button"></div>
</a>

What would be better is replace the div completely with the a. For example:

<a class="button" href="theFile.pdf" download></a>

score 1 · Answer 2 · answered Apr 08 '17 at 21:19

1

<a href="downloads/TheFile.pdf" download><div class="button"></div></a>

answered Apr 08 '17 at 21:19

Marko

the post above is basically the same, but thanks anyway – Mr. E Jun 22 '17 at 16:58

2 Answers2