如何通过点击链接下载图像而不是打开它

Question

我正在运行一个 Flask 应用程序，并使用一个名为“Autoindex”的插件来列出目录中的所有文件，就像这样现在，当我单击图像名称时，它会打开图像。 但我想在不离开页面点击按钮的情况下下载图像。

我无法修改此HTML代码。 所以我在想，我可以使用 Javascript 来执行这个任务吗？

编辑

这是 HTML 代码：

<td class="name">
  <a href="/templete/images/2.jpg">2.jpg</a></td>
<td class="modified">
  <time datetime="2019-07-15 15:42:20.989829">2019-07-15 15:42:20.989829</time>
</td>
<td class="size">

现在，我无法直接修改 HTML 代码。 该链接没有类，我该如何更改它

<a href="/templete/images/2.jpg">2.jpg</a>

为此，对于页面中的所有图像链接。

<a href="" download="/templete/images/2.jpg">2.jpg</a>

Answer 1

您可以使用 JS 将下载属性添加到 HTML 元素：

element.setAttribute('download','')

或者更简单：

element.download=''

因此，您可以轻松地为每个以href结尾的链接添加.jpg ：

const links=document.querySelectorAll('a[href$=".jpg"]')
links.forEach(link=>link.download='')

Answer 2

太容易了！ 将图像放在标签内或带有标签，然后添加属性下载和带有该标签的图像的 URL。 这是一个例子：

 <a href="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" download> <img src="https://www.publicdomainpictures.net/pictures/320000/nahled/background-image.png" alt="W3Schools" width="104" height="142"> </a>

图片

注意： IE 或 Edge（18 之前的版本）或 Safari（10.1 之前的版本）不支持下载属性。