[리액트] 서버에서 받은 파일 다운로드_📂 / createElement, a tag, URL.createObjectURL

 

[React_file download]

 

지난 포스팅에서 HTML의 a태그를 이용하여 파일을 다운로드 하는 방법에 대해 알아보았다.

 

👉 [HTML] 파일 다운로드_📂 / a 태그, download, HTML

[HTML] 파일 다운로드_📂 / a 태그, download, HTML

 

오늘은 리액트로 서버에서 받은 파일을 다운로드 할 수 있게 구현하는 방법에 대해 알아보자

 

---

<STUDY>

 

``````

import React from 'react';

``````

// 생략

const downloadFile = (serverName: string, fileName: string) => {
  const url = URL.createObjectURL(file); // 상대경로
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName; // 저장될 파일이름
  document.body.appendChild(a);
  a.click();
  setTimeout(_ => {
    URL.revokeObjectURL(url);
  }, time);
  a.remove();
  })
};

 

   💡 a : 파일을 다운로드 받기 위한 a 태그

 

   💡 url : 로컬 저장소에 저장하기 위해 파일의 상대경로

 

   💡 URL.revokeObjectURL : 생성된 url 해제

      ❕ time : url을 해제시키기까지 시간 지정

 

 

---

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview