1

I want to create a download button which will download image from api, I was able to do that but then got stuck in a problem . whenever I click on download button it does download the image but it also open the image in that page which makes it to leave the main page. I want it so that it won't open the image only download the image .

here is what I did

const download = (e) => {
    console.log(e.target.href);
    fetch(e.target.href, {
      method: "GET",
      headers: {},
    })
      .then((response) => {
        response.arrayBuffer().then(function (buffer) {
          const url = window.URL.createObjectURL(new Blob([buffer]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "image.png"); //or any other extension
          document.body.appendChild(link);
          link.click();
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };



<div className="row">
        <div className="col-sm-4 text-center">
          {quote?.map((items) => (
            <div class="card" style={{ width: "18rem;" }}>
              <img src={items.img} class="card-img-top" alt="..." />
              <div class="card-body">
                <h5 style={{ textTransform: "capitalize" }} class="card-title">
                  {items.name.replace(/_/g, " ")}
                </h5>
                <p class="card-text">{items.disc}</p>
                <Button
                  variant="outlined"
                  href={items.img}
                  onClick={ download }
                >
                  Download
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>
UNRIVALLEDKING
  • 265
  • 3
  • 15
  • Do you control the API? Can you set [HTTP Headers](https://stackoverflow.com/a/6794317/4935162) when returning the image? – Yarin_007 May 04 '22 at 17:25
  • I have wrote the whole json file myself but I'm using image link from google images or other sites. I have tried other online api too. – UNRIVALLEDKING May 04 '22 at 18:41
  • Can you try - `window.open(file.url, '_self')` – A G May 04 '22 at 19:20
  • it still opening the image in same tab – UNRIVALLEDKING May 05 '22 at 06:05
  • Comment all the code in `download` function & just do `window.open(e.target.href, '_self')`. `e.target.href` is a valid image url right? – A G May 05 '22 at 06:08
  • It's just opening the image in the same tab. I want to download the image without opening it or navigating to other tab. @AseemGautam – UNRIVALLEDKING May 05 '22 at 06:44
  • 1
    @UNRIVALLEDKING Posted answer, seems I had a server configuration that forces download. Check my answer please. – A G May 05 '22 at 09:24

1 Answers1

2

The client side solution would only work if the requested image is NOT blocked by CORS policy.

  async function download(url) {
    const a = document.createElement("a");
    a.href = await toDataURL(url);
    a.download = "myImage.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }

  function toDataURL(url) {
    return fetch(url)
      .then((response) => {
        return response.blob();
      })
      .then((blob) => {
        return URL.createObjectURL(blob);
      });
  }

  function onClick() {
    download("https://github.githubassets.com/images/modules/profile/badge--acv-64.png");
  }

Complete working demo at codesandbox

If you have server access you can just add a Content-disposition header & then simply doing window.open(url, '_self') would download the image -

NGINX - add_header Content-disposition "attachment; filename=$1";

A G
  • 21,087
  • 11
  • 87
  • 112