Question

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

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

其实我正在使用magnific-popup并且还需要显示标题和下载链接。因为我已经有锚，所以我无法使用另一个内部锚，这样就可以了。我正在使用标题标签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();
});

概念：使用anchor和display:none属性为您的html添加虚拟download标记，并在用户点击h1标记时将data-source设置为src到该假锚并触发其自然点击。

DEMO

Answer 2

您可以使用XMLHttpRequest() responseType设置为"blob"，URL.createObjectURL()，download属性，.click()，.remove() < / p>

   $("h1").click(function() {
      var request = new XMLHttpRequest();
      request.responseType = "blob";
      request.onload = function() {
        $("<a>", {
          id:"download",
          href:URL.createObjectURL(this.response)
        , download:""})
        .appendTo("body")[0].click();
        $("#download").remove();
      };
      request.open("GET", $(this).data().source);
      request.send()
   })

Answer 3

https://jsfiddle.net/medashiva/gzxvzazg/试试这个希望帮助

$(document).ready(function(){

$("h1").click(function(e){
e.preventDefault();  //stop the browser from following
window.location.href = $(this).attr("data-source");
 })

})

Answer 4

HTML：

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

CSS：

#download{
  cursor:pointer;
}

JS：

$("#download").click(function(e) {
  var link = $(this).data("source");
  e.preventDefault();
  window.location.href = link;
});

DEMO

Answer 5

您可以使用此简短插件 - Filesaver.js

从h1标记获取链接并使图像可下载

5 个答案:

DEMO