url 이미지를 blob으로 변환, url image Blob 객체로 변환하여 다운로드하기

image url은 알고있는데, 이것을 다운로드 하고싶다면 어떻게 해야 할까?

일단 돔을 그린다.

// 파일명과 파일 url을 파라미터로 넘긴다.
<button className="file-download" onClick={() => handleImageDownload(file.filename, file.url)}

파일명을 보내주는 이유는, 파일명을 api response에서 꺼내려면 헤더에서 꺼내야 하기때문이다 (백엔드 설정이 제대로 되어있어야 한다)버튼을 클릭했을때 handleImageDownload가 동작하도록 작업을 하자.

const handleImageDownload = async (filename: string, url: string) => {
    try {
      // 데이터를 blobType으로 받는다.
      const response = await axios.get(url, { responseType: "blob" });
      // Blob 객체를 생성한다.(이 Blob 객체는 이미지 데이터를 가지고있다)
      const blob = new Blob([response.data]);
      // BlobURL을 만들어준다. 브라우저에서 blob 데이터를 가리키는 고유한 url이다.
      const blobURL = URL.createObjectURL(blob);
      // a 태그를 동적 생성한다.
      // 실제로 돔에 생성되는게 아니고, 메모리상에 생성된다.
      const link = document.createElement("a");
      // 생성한 a태그의 href를 blob URL로 지정해주고,
      link.href = blobURL;
      // prop으로 받은 파일명을 지정해준다 (이 속성이 있어야 다운로드된다)
      link.download = filename;
      // 링크요소를 클릭하여 동작하게 해준다.
      link.click();
    } catch (error) {
      console.log("다운로드실패", error);
    }
  };

 

이제 다운로드가 잘 동작한다.