HTML：如何通过单击下载链接，而不是右键点击并选择“另存为”？

Question

在我的html文件中，我希望有一个图像链接，当点击它时，它会开始下载到本地文件夹。通常情况下，要下载链接，我们必须右键单击然后选择另存为。

我尝试了以下方法：

 var href = document.createElement("a");
 href.setAttribute("href", url1);
 href.appendChild(document.createTextNode("Image Download"));
 href.setAttribute("download", "test.jpg");
 contentDiv.appendChild(href);

但它仍然无法工作。我点击后，图片在浏览器中打开。

- Santhosh

Answer 1

相反，在您的HTML中尝试使用以下内容：

<a download="test.jpg" href="insert/path" title="insertName">
insert text here!!
</a>

希望这能有所帮助，但我听说只在某些浏览器中有效！

*注意 - 我认为你需要像我一样做，只需替换占位符！

- Brett Carwile

---

<a download="test.jpg" href="https://farm8.staticflickr.com/7555/29856053076_43cceef1b6_o.jpg">download</a> 我在火狐浏览器中尝试了这个，但它没有起作用。 - Santhosh

href="insert/path/(Where you want the user to save it to)" 这是什么意思？我的图片链接是 https://farm8.staticflickr.com/7555/29856053076_43‌​ccee‌​f1b6_o.jpg。 - Santhosh

谢谢你的帮助。我非常需要一个可行的解决方案。你能解释一下我的评论吗？ - Santhosh

我不需要展示图片。文本就足够了：<a download="test" href="https://farm8.staticflickr.com/7555/29856053076_43ccee‌​f1b6_o.jpg">download</a> 但它无效。 - Santhosh

实际上，您可以完全删除img部分，这可能会更好。抱歉，如果听起来像我不知道我在做什么，我还在学习！附言：我测试了它，图像存在问题，但问题在于图像本身，而不是代码。 - Brett Carwile

Answer 2

在MDN参考文档中：

该属性（如果存在）表示作者意图将超链接用于下载资源，以便当用户单击链接时，会提示将其保存为本地文件。如果该属性具有值，则该值将用作“保存”提示中的预填充文件名，当用户单击链接时，会打开该提示（当然，用户可以在实际保存文件之前更改名称）。没有对允许值施加限制（尽管 / 和 \ 将转换为下划线，从而防止特定路径提示），但是您应该考虑到大多数文件系统在支持文件名中使用的标点符号方面存在限制，并且浏览器可能会相应地调整文件名。

在Firefox中不支持download属性。

但是，如果您正在使用Chrome和JavaScript，可以尝试使用以下代码：

var imageURL, contentDiv, href, img;
imageURL = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/go-home-128.png";

contentDiv = document.getElementById("contentDiv");

href = document.createElement("a");
href.setAttribute("href", imageURL);
href.setAttribute("download", imageURL);

img = document.createElement("img");
img.alt = "Download image";
img.title = img.alt;
img.src = imageURL;

href.appendChild(img);
contentDiv.appendChild(href);

<div id="contentDiv"></div>

注意:在 Google Chrome 中，您可以使用 download 属性而无需设置要下载的 url。

示例：

<a href="https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/go-home-128.png" download>Image Download</a>

- Danny Fardy Jhonston Bermúdez

---

href.setAttribute("download", "download"); 与您的代码 @SanthoshYedidi 不同。 - andrepaulo

我正在使用 href.setAttribute("download", "test.jpg");，它与 href.setAttribute("download", "download") 有什么区别？只有 test.jpg 和 download，这会产生什么不同的影响。 - Santhosh

实际上，这个属性在Firefox中不起作用。我已经对我的答案进行了一些更改。 - Danny Fardy Jhonston Bermúdez

Answer 3

从服务器发送以下响应头以下载文件，否则该文件将在浏览器中显示：

Content-Disposition: attachment; filename=FILENAME
Content-Type: application/x-force-download; name="FILENAME"

其中FILENAME是下载时文件所需的名称。

- Marat Tanalin