Question

我正在运行flask应用，并使用名为“ Autoindex”的插件列出目录中的所有文件， like this 现在，当我单击图像名称时，它将打开图像。但是我想对图像进行下层处理，而不必在单击按钮时留下页面。

我无法修改其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版之前的版本）不支持download属性。

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

2 个答案: