如何在javascript或react中通过url下载png图像？

Question

我正在尝试下载图像，但是当我单击下载按钮时，图像刚刚显示，我重定向到链接并出现。我使用这个函数，我将 url 作为参数传递。 这个函数适用于 csv 扩展、二进制文件，但图像它不起作用..我不知道该怎么办 =(

export function downloadUrl(url: string, filename?: string) {
  const element = document.createElement("a");

  element.setAttribute("href", url);

  if (filename) {
    element.setAttribute("download", filename);
  }

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

  element.click();

  document.body.removeChild(element);
}

<Button onClick={downloadUrl(ImageUrl)}/>

Answer 1

您可以使用FileSaver

FileSaver.saveAs("https://<yourimage>", "<image-name.jpg>");

Answer 2

FileSaver.saveAs("https://in.bmscdn.com/discovery-catalog/collections/tr:w-800,h-800:ote-MTI1KyBFdmVudHM%3D,otc-FFFFFF,otf-Roboto,ots-64, ox-48,oy-320,ott-b:w-300","workshops-collection-202007231330.png");