从浏览器控制台（JavaScript）下载图像链接

Question

我正在使用Firefox和/或Chrome的开发人员控制台/检查元素中的JavaScript。我想从链接下载多个图像文件，例如此链接：https://i.etsystatic.com/9228829/r/il/d729fb/992816422/il_fullxfull.992816422_35w3.jpg。因此，在控制台中，我将该链接（以及其他链接）作为字符串，并尝试直接将它们下载到计算机上。我可以触发下载，但它要么在新标签页中打开而不是下载，要么下载一个空图像文件。我已经尝试了来自StackOverflow的5个不同函数，但似乎都无法正常工作。您有什么想法吗？以下是示例代码（从互联网上找到的）：

function download(filename, filelink){
  var link = document.createElement('a');
  link.href = filelink;
  link.download=true;
  document.body.appendChild(link);
  //link.target = "self";
  link.click();
  console.log(link);
  document.body.removeChild(link);
}

var imageToDownload = "https://i.etsystatic.com/9228829/r/il/d729fb/992816422/il_fullxfull.992816422_35w3.jpg"

download(("image.jpg"), imageToDownload);

这是第二个下载函数，它可以下载，但文件为空。是的，我知道它正在寻找文本等内容，但我无法将其修改为适用于图像。

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  //element.setAttribute('href', 'data:jpg/image;base64');
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

- JackNapier

Answer 1

link.href = filelink;
link.download=true;

上述代码无法正常工作。锚点标签的下载属性应该指向要下载的文件所在的链接。只有这样，点击锚点标签才会自动触发下载。

可行的代码：

var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();

你可以在这个问题的回答中查看详细答案。

- Evan MJ

Answer 2

只需做：

link.download=filelink;

并删除：

document.body.removeChild(link);

- Sajal Agarwal