[javascript] 자바스크립트로 파일 다운로드하기

14 Dec 2023

javascript

이번 글에서는 자바스크립트를 사용하여 웹 애플리케이션에서 파일을 다운로드하는 방법에 대해 알아보겠습니다.

URL을 사용한 다운로드

가장 간단한 파일 다운로드 방법은 URL을 사용하는 것입니다. 사용자가 링크를 클릭하면 해당 파일이 다운로드됩니다. 자바스크립트를 사용할 필요는 없지만, 다음 예제를 통해 간단히 보여드리겠습니다.

function downloadFile(url) {
  window.open(url);
}

위 코드에서는 downloadFile 함수를 통해 파일을 다운로드할 수 있습니다.

Blob 객체를 활용한 다운로드

Blob (Binary Large Object) 객체는 파일과 유사한 데이터를 나타내는 데 사용됩니다. 이를 활용하여 자바스크립트를 사용하여 동적으로 생성한 데이터를 파일로 다운로드할 수 있습니다.

function downloadBlob(data, filename) {
  const blob = new Blob([data], { type: 'application/octet-stream' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

위 downloadBlob 함수는 데이터와 파일 이름을 입력으로 받아 Blob 객체를 생성하고, 이를 사용해 파일을 다운로드하는 방법을 보여줍니다.

Fetch API를 활용한 다운로드

Fetch API를 사용하여 서버에서 파일을 가져와 다운로드할 수도 있습니다.

function downloadFileUsingFetch(url) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const blobUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = blobUrl;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(blobUrl);
      document.body.removeChild(a);
    });
}

위 코드에서는 downloadFileUsingFetch 함수를 통해 Fetch API를 사용해 파일을 다운로드하는 방법을 보여줍니다.

다음은 자바스크립트를 사용하여 파일을 다운로드하는 몇 가지 방법에 대해 알아보았습니다. blob, fetch API 등을 활용하여 파일을 다운로드하는 방법을 보여드렸습니다. 이러한 기술을 효율적으로 활용하여 웹 애플리케이션에서 파일을 관리하고 제공하는 방법에 대해 더 자세히 학습하고 활용해보시기 바랍니다.

참고 자료: