html5 href 下载属性不适用于 .pdf 文件答案

【问题标题】：html5 href download attribute not working with .pdf filehtml5 href 下载属性不适用于 .pdf 文件
【发布时间】：2014-12-05 02:37:34
【问题描述】：

我希望在用户单击表格元素中的图像时下载 .pdf 文件。这就是我所拥有的：

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

现在，它似乎可以点击下载，但 Chrome 显示“服务器故障”。我使用的是 Chrome 版本 38，关闭了广告屏蔽扩展。

.pdf 位于我的 public_html 文件夹中（不在任何子文件夹中），因此文件路径似乎正确...

当我尝试从 Safari 7.0.6 中的链接下载时，我收到以下消息：“禁止访问。您无权访问此服务器上的 /splosion_CV.pdf。此外，尝试时遇到 404 Not Found 错误使用 ErrorDocument 来处理请求。”

知道为什么下载属性对我不起作用吗？

【问题讨论】：

public_html 文件夹实际上可能不允许直接下载。尝试将 PDF 移动到您的 /images 目录或您知道可以直接获取文件的类似目录。您也可以在地址栏 (whatever/splosion_CV.pdf) 中输入路径，然后查看您是否确实获得了文件或 403 Forbidden 错误。
@user3120173 我将 pdf 添加到图像文件夹并更改了文件路径：<a href="images/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> 但 Chrome 仍然给我“失败的服务器问题”消息。当我在地址栏中输入 www.mywebsite.com/images/splosion_CV.pdf 时，出现 404 错误。但是当我在地址栏中键入 www.mywebsite.com/splosion_CV.pdf 时，Chrome 会在浏览器中显示 .pdf。
这可能是您的 Chrome 安装中的某种浏览器设置吗？还是防火墙问题？根据其他一些答案，它似乎不是您的代码。尝试使用 Chrome 开发者工具中的网络标签来查看实际发送和接收的内容 - 不一定相信屏幕上显示的消息。
@user3120173 好的！所以我尝试在打开 Chrome 的开发者工具网络选项卡的情况下加载页面，我得到的唯一错误是 .gif 图像（状态：403 禁止，类型：文本/html）但这可能是另一篇文章，一个单独的问题，我想？加载网页后，当我单击 .png 链接时，会发生同样的事情：它似乎在单击时下载了 .pdf，但随后 Chrome 显示“服务器故障问题”。我在此网页的多个位置使用 lightbox.js，这会导致“下载”属性出现问题吗？当我在本地测试网页时，我可以点击下载 .pdf。

标签： html pdf

【解决方案1】：

我在 chrome 和 fire-fox 中运行你的代码，看起来它运行良好。

代码是：

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

注意：IE、Safari 或 Opera 12 版不支持下载属性
（及更早）

【讨论】：

我意识到 IE 不支持它；我正在 Chrome 版本 38 上对其进行测试，所以它应该按照这个工作？-> (caniuse.com/#feat=download) 但它对我不起作用。每次更改代码时，我都清除了 Chrome 的缓存。当我右键单击+“将链接另存为...”时，它甚至对我也不起作用。猜猜我必须使用php？ ◔̯◔
我的火狐版本是 - 32.0.3 Chrome - 38.0.2125.101 (64-bit)

【解决方案2】：

好的，原来存在权限问题，服务器端。我联系了我的虚拟主机，他们修复了它！

【讨论】：

您的代码在 safari 上运行我使用了相同的代码但在 safari 中不工作您知道为什么这在 safari 中不工作