Button to Download a pdf file

Question

I have a HTML button and I want it to download the pdf file by pressing it. Thank you

       <div class="columns download">
          <p>
             <a href="images/Portfolio.pdf" class="button"><i class="fa fa-download"></i>Download CV</a>
          </p>
       </div>

try this .. http://www.w3schools.com/tags/att_a_download.asp — Kishore Sahasranaman, Nov 11 '15 at 04:21
and also fyi, the browser by default, downloads the pdf file and if you provide the `` link, and if the pdf viewer is enabled by default the browser will show the pdf. — Kishore Sahasranaman, Nov 11 '15 at 04:25
When I press the Button it goes to a new page with the pdf online. I don't want that! I want to download it... — João Guerreiro, Nov 11 '15 at 04:28

score 7 · Answer 1 · edited Jun 27 '17 at 21:13

7

The way to do that is to embed the button inside the a tag link.

<a href="./abcf32x.pdf" download="How-to-download-file.pdf">
    <button>Download File</button>
</a>

edited Jun 27 '17 at 21:13

Paul Roub

36,322
27
84
93

answered Jun 27 '17 at 21:06

phaattran

71
1
2

1

A button inside an anchor is invalid HTML5: https://stackoverflow.com/a/6393863/7903952 – Dan Jun 04 '19 at 13:34
At this moment it only fails when the button is inside a
Thus operationally it is not considered invalid everywhere
– Matias Haeussler Oct 18 '21 at 14:36

score 6 · Answer 2 · answered Nov 11 '15 at 04:28

6

 <div class="columns download">
          <p>
             <a href="images/Portfolio.pdf" class="button" download><i class="fa fa-download"></i>Download CV</a>
          </p>
       </div>

answered Nov 11 '15 at 04:28

Rakin

1,271
14
30

Karan Oza · Answer 3 · 2020-10-07T14:58:23.330

-2

<p>    
    <a href="files/document.pdf" class="button">
       <i class="fa fa-download"></i>
          Download CV
    </a>
</p>

edited Oct 07 '20 at 14:58

answered Sep 30 '20 at 08:09

Karan Oza

1
2

Button to Download a pdf file

3 Answers3