js

JS - 자바스크립트로 파일 다운로드하는 방법

12월 25, 2023

HTML의 download 속성을 이용해 아래 예제와 같이 파일 다운로드가 가능하지만 Axios 를 사용하여 파일 다운로드하는 방법도 있습니다.

<a href="cat.png" download>이미지 다운로드</a>

이 접근 방식에서는 Axios를 사용하여 파일을 다운로드합니다. 예제에 나와 있는 Blob는 Binary Large Object의 약자로 데이터가 큰 바이너리 파일을 저장할 수 있는 데이터 유형입니다. 프로그램, 코드, 멀티미디어 개체 및 기타 JavaScript 기본 형식을 지원하지 않는 데이터와 같은 데이터를 읽어오기 위해 필요합니다.

여기서 우리는 사이트에서 임의의 이미지를 가져오고 Axios를 사용하여 해당 이미지를 blob 형식으로 요청한 다음 download속성을 사용하여 다운로드합니다. API에서 모든 종류의 데이터를 요청한 다음 이 접근 방식을 사용하여 컴퓨터 내부에 데이터를 저장할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript를 사용하여 파일을 다운로드하는 방법</title>
</head>

<body>
  <button onclick="download()">Download Image</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
  <script>
    function download() {
      axios({
        url: 'https://example.com/cat.png',
        method: 'GET',
        responseType: 'blob'
      }).then((response) => {
        const url = window.URL
          .createObjectURL(new Blob([response.data]));

          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'cat.png');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
    }
  </script>
</body>
</html>

출처: https://www.delftstack.com/ko/howto/javascript/javascript-download/

Tag:

0 Comments

0 댓글