从浏览器控制台下载图片链接 (javascript)答案

【问题标题】：Download image link from browser console (javascript)从浏览器控制台下载图片链接 (javascript)
【发布时间】：2020-07-08 17:13:48
【问题描述】：

我在开发者控制台/检查元素中使用 Javascript（在 Firefox 和/或 Chrome 中，任一）。

我想从一个链接下载多个图像文件 - 例如：https://i.etsystatic.com/9228829/r/il/d729fb/992816422/il_fullxfull.992816422_35w3.jpg

因此，在控制台中，我将该链接（和其他链接）作为字符串，对于每个链接，我都尝试将它们直接下载到我的计算机上。我可以触发下载，但它要么 a) 在新选项卡中打开而不是下载，b) 下载一个空图像文件。

我现在可能已经尝试了 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);
}

【问题讨论】：

标签： javascript image google-chrome download console

【解决方案1】：

随便制作：

link.download=filelink;

并删除：

document.body.removeChild(link);

【讨论】：

【解决方案2】：

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();

您在this question查看详细答案

【讨论】：