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

但它还没有奏效。我点击，图像在浏览器中打开

Answer 1

而是在HTML中尝试与此相关的内容：

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

希望这会有所帮助，但我听说这只适用于某些浏览器！

*注意 - 我相信你需要像我拥有它一样，只需更换占位符!!

Answer 2

在MDN Reference：

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

Firefox不支持download属性。

但是，如果您使用的是Chrome，那么您可以尝试使用以下内容：

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属性，而无需设置要下载的网址。

示例：

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

Answer 3

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

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

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

Html：如何点击下载链接，而不是右键单击并另存为

3 个答案: