[NextJS] 이미지 다운로드 하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

모듈화가 중요하다는 말을 참 많이듣는것같다. 전부 함수화 해서 모듈화 해서 사용하고 있는데

이미지를 다운로드 하는 일은 많을 것 같아서 해당 함수를 여기에 기록해두려고 한다.

언제든지 복사해놓고 사용 할 수 있도록 코드를 넣어놓도록 해야겠다.

downloadImage.tsx

export const downloadImage = (
  imageUrl: RequestInfo | URL,
  fileName: string
) => {
  // 이미지를 불러와서 Blob 객체 생성
  fetch(imageUrl)
    .then((response) => response.blob())
    .then((blob) => {
      // Blob 객체로부터 다운로드 링크 생성
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = fileName;

      // 다운로드 링크 클릭 및 객체 제거
      link.click();
      URL.revokeObjectURL(link.href);
    });
};