javascript - 从 h1 标签获取链接并使图像可下载

Question

如何从 h1 标签获取链接并使图像可下载

<h1 data-source="image/image.jpg"><download Image</h1>

实际上我正在使用 magnific-popup 并且还需要显示标题和下载链接。由于我已经有了 anchor a，所以我无法使用另一个有意义的内部 anchor 。我使用标题标签 h1、h2、h3 来显示标题详细信息和下载链接，但我想让下载 h1 在用户单击它下载图像而不是在浏览器中打开图像时以某种方式工作。

Answer 1

你必须像下面那样做，

HTML:

<h1 data-source="image/image.jpg">download Image</h1>
<a style="display:none;" class="downloader" href="" download></a>

JS:

$("h1").click(function(){
 $(".downloader").attr("href", $(this).data("source"))[0].click();
});

概念:使用 display:none 和 download 属性向您的 html 添加一个虚拟 anchor 标记，并且当用户点击 h1 标签时，将其 data-source 设置为该虚拟 anchor 的 src 并触发其自然点击。

DEMO