从h1标签获取链接并使图片可下载

get link from h1 tag and make image downloadable

本文关键字：下载 h1 标签 获取 链接      更新时间：2023-09-26

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

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

事实上，我正在使用放大弹出窗口，需要显示标题和下载链接。由于我已经有了锚a，所以我无法使用另一个使感觉的内部锚a。我使用标题标签h1、h2、h3来显示标题详细信息和下载链接，但我想让下载h1以用户点击下载图像的方式工作，而不是在浏览器中打开图像。

你必须像下面这样做，

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设置为该伪锚点的src，并触发其自然单击。

演示

您可以在responseType设置为"blob"、URL.createObjectURL()、download属性、.click()、.remove() 的情况下使用XMLHttpRequest()

   $("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()
   })

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

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

您可以使用这个简短的插件-Filesaver.js

相关文章：