4

I want a .pdf file to download when the user clicks on an image within a table element. This is what I've got:

<a href="splosion_CV.pdf"download="splosion_CV.pdf"><img src="images/downloadIcons/download_icon_violet.png" width="32" height="32" alt="Download my CV" border="0"/></a>

Right now, it appears to download on click, but then Chrome says "failed-server problem". I'm using Chrome version 38, with the ad-block extension turned off.

The .pdf is in my public_html folder (not in any subfolder)so the file-path seems right...

When I try downloading from the link in Safari 7.0.6 I get this message: "Forbidden. You don't have permission to access /splosion_CV.pdf on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."

Any idea why the download attribute isn't working for me?

Splosion Lowbeam
  • 73
  • 1
  • 1
  • 10
  • The public_html folder may actually not permit direct downloads. Try moving the PDF to your /images directory or something similar where you know you can get the file directly. You can also just type the path into the address bar (http://whatever/splosion_CV.pdf) and see if you actually get the file or a 403 Forbidden error. – user3120173 Oct 10 '14 at 01:56
  • @user3120173 I added the pdf to the images folder and changed the file-path: `Download my CV` but Chrome still gives me the "failed- server problem" message. When I type _www.mywebsite.com/images/splosion_CV.pdf_ in the address bar, I get a 404 error. But when I type _www.mywebsite.com/splosion_CV.pdf_ in the address bar Chrome displays the .pdf in the browser. – Splosion Lowbeam Oct 10 '14 at 02:17
  • Is it possible this is some kind of browser setting in your Chrome installation? Or a firewall problem? Based on some of the other answers, it doesn't seem to be your code. Try using the Network tab in Chrome's Developer Tools to see what is actually being sent and received - don't necessarily believe the message that shows up on the screen. – user3120173 Oct 10 '14 at 06:14
  • @user3120173 ok! so i've tried loading the page with Chrome's Developer Tools Network tab open, and the only errors I get, are for a .gif image (status: 403 forbidden, type: text/html) But that's perhaps for another post, a seperate issue, I think? After loading the webpage, when I click the .png link, same thing happens: it appears to download the .pdf on click, but then Chrome says "failed-server problem". I'm using lightbox.js in multiple places on this webpage, could that cause problems with the 'download' attribute? When I test the webpage locally, I'm able to download the .pdf on click. – Splosion Lowbeam Oct 10 '14 at 20:32

2 Answers2

2

i run your code in chrome & fire-fox and looks like its works perfectly.

Code is:

<!DOCTYPE html>
<html>
<body>
  <a href="hello.pdf" download>
    <img src="Cube.png" width="32" height="32" border="0"/>
  </a>
</body>
</html>

Note: The download attribute is not supported in IE, Safari or Opera version 12
(and earlier)

bud-e
  • 1,511
  • 1
  • 20
  • 31
  • I realize it's not supported in IE; I'm testing it on Chrome version 38, so it should work according to this?-> (http://caniuse.com/#feat=download) but it's not working for me. I've cleared Chrome's cache with each change in the code as well. It doesn't even work for me when I right-click + 'save link as...' either. Guess I have to use php? ◔̯◔ – Splosion Lowbeam Oct 10 '14 at 02:34
  • My firefox version is - 32.0.3 Chrome - 38.0.2125.101 (64-bit) – bud-e Oct 10 '14 at 02:44
1

Alright, turns out there was permissions issues, server-side. I contacted my webhost and they fixed it!

Splosion Lowbeam
  • 73
  • 1
  • 1
  • 10
  • your code is working on safari i used same code but not working in safari you have any idea why this not working in safari – Renish Khunt Feb 23 '15 at 07:44