0

I have an icon and I want it to work as a download button for a pdf. I've tried several things but nothing has worked so far any easy way to do this?

carlosflrs
  • 1
  • 2

4 Answers4

1

Fairly simple to wrap your icon in an anchor, or use the icon as a background for one

<a href="path/to/download">
   <img src="icon.png">
</a>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Well download behaviour will vary depending on what the browser actually thinks is best to do with the resource. – MinusFour Aug 25 '15 at 01:00
  • @MinusFour but that can be server determined also. Question didn't clarify – charlietfl Aug 25 '15 at 01:02
  • Thanks this kinda works but is there a way to start the download immediately without it opening a new page? – carlosflrs Aug 25 '15 at 01:03
  • can use ajax or set server to force download by setting headers or use a server side script to read the file and return with proper headers – charlietfl Aug 25 '15 at 01:05
0

First convert pdf to image.

1) Then Create an HTML Button 

<form>
<input type="button" value="Button Text">
onClick="window.location.href="www.sample.com/picture.jpg"
</form>

2) Create the button in a code editor.Upload the file to your server. Use FTP client to upload the file.

3) Label the button.You will either need to host it on your own server or point the button to the file somewhere else on the web.

<a href="Download Location">
<img scr="Image File" alt="Hover Text" width="X" height="Y">
</a>
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
William Vanderbilt
  • 1
  • 1
0

You can use jQuery:

HTML

<img id="btnDownload" src="icon.png" />

jQuery

$(document).ready(function(){
   // you can bind the onClick event on the button by getting its id
   $("#btnDownload").click(function(e){
         e.preventDefault(); //=> This line of code will prevent you on going to another location
        // YOUR CODE ON DOWNLOADING THE PDF
        // YOU CAN ALSO USE AJAX here for you pdf download....
   });
});

For more info regarding on e.preventDefault follow this link http://api.jquery.com/event.preventdefault/

Lian
  • 1,597
  • 3
  • 17
  • 30
0

a tags have a download attribute that downloads the link directly

<a href="/path/to/pdf" download>Download pdf</a>
Kyle Alwyn
  • 71
  • 2