Question

您好，我正在尝试对HTML按钮进行编码以下载图像。

这是我正在使用的代码，似乎我正在接近但不完全是

sed -n '/name: "."/{N;s/.*//;x;d;};x;p;${x;p;}' file

这是我下载时的屏幕截图： https://snag.gy/tTC2ER.jpg

Answer 1

您可以检查以下响应：href image link download on click
这个答案也使用Jquery Download Plugin
尝试this script：

//https://stackoverflow.com/a/50042812/10849656

function forceDownload(link){
    var url = link.getAttribute("data-href");
    var fileName = link.getAttribute("download");
    link.innerText = "...";
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
        link.innerText="Download";
    }
    xhr.send();
}

<a href="#" data-href='https://i.imgur.com/mdYoHMD.jpg' download="Image.jpg" onclick='forceDownload(this)'>Download Image</a>

Answer 2

我认为您的代码不正确

尝试一下：

<a href="https://assets.giftcardsuite.com/valentinesday/Valentines-Day-Theme-1.png" download>Click here</a> to download

Answer 3

下载某些内容时，通常会使用下面的下载功能。我不需要从DOM中删除，因为它永远不会放在DOM中。

JavaScript

function download(data, name) {
      var blob = new Blob([data], {type: 'application/octect-stream'});
      var bloburl = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = bloburl;
      a.download = name;
      a.click();
      URL.revokeObjectURL(blob);
}

如何在HTML中创建“下载”按钮？

3 个答案: