파일 다운로드는 웹 애플리케이션에서 사용자가 원하는 파일을 다운로드할 수 있도록 하는 중요한 기능입니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 파일 다운로드를 처리하는 방법에 대해 알아보겠습니다.

파일 다운로드 링크 생성하기

파일 다운로드를 위해서는 다운로드할 파일의 URL을 생성해야 합니다. 이때, <a> 태그를 사용하여 링크를 생성하고 download 속성을 추가합니다.

<a href="파일의 URL" download>다운로드</a>

위 코드에서 "파일의 URL"에는 다운로드하고자 하는 파일의 실제 URL을 넣어주면 됩니다. 이렇게 생성된 링크를 클릭하면, 해당 파일이 다운로드되게 됩니다.

자바스크립트로 파일 다운로드 처리하기

자바스크립트를 사용하여 파일 다운로드를 처리할 때는 window.location.href를 사용하여 다운로드할 파일의 URL로 리다이렉션을 수행합니다.

function downloadFile(url) {
  window.location.href = url;
}

위와 같이 downloadFile 함수를 정의하고 다운로드할 파일의 URL을 파라미터로 전달하여 호출하면, 파일이 다운로드됩니다.

파일 다운로드 프로그레스 바 표시하기

파일이 크거나 다운로드 시간이 오래 걸리는 경우, 사용자에게 다운로드 진행 상황을 알려주는 프로그레스 바를 표시하는 것이 좋습니다.

function downloadFileWithProgressBar(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';

  xhr.onprogress = function(event) {
    const progressBar = document.getElementById('progressBar');
    progressBar.value = event.loaded;
    progressBar.max = event.total;
  }

  xhr.onload = function() {
    const blob = new Blob([xhr.response], { type: 'application/octet-stream' });
    const downloadUrl = URL.createObjectURL(blob);
    const downloadLink = document.createElement('a');
    downloadLink.href = downloadUrl;
    downloadLink.download = '파일명';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }

  xhr.send();
}

위 코드에서 progressBar는 프로그레스 바를 나타내는 HTML <progress> 요소입니다. xhr.onprogress 이벤트 핸들러를 통해 다운로드 진행 상황을 감지하고, 프로그레스 바의 값을 업데이트합니다. 그리고 xhr.onload 이벤트 핸들러에서는 다운로드를 완료하고 다운로드할 파일의 URL을 생성하여 다운로드 링크를 동적으로 생성합니다.

결론

자바스크립트를 이용하여 파일 다운로드를 처리하는 방법에 대해 알아보았습니다. 파일 다운로드 링크 생성, 자바스크립트를 이용한 파일 다운로드 처리, 그리고 파일 다운로드 프로그레스 바 표시 등의 기능을 활용하여 사용자가 편리하게 파일을 다운로드할 수 있도록 구현할 수 있습니다.

#자바스크립트 #파일다운로드