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

14 Dec 2023

javascript

파일 다운로드 이벤트를 자동으로 트리거하거나 다운로드 링크를 동적으로 생성해야 하는 경우가 있습니다. 자바스크립트를 사용하면 브라우저에서 파일을 다운로드하는 과정을 제어할 수 있습니다. 이번 블로그에서는 자바스크립트를 사용하여 파일 다운로드 이벤트를 처리하는 방법을 살펴보겠습니다.

1. 링크 클릭으로 다운로드 이벤트 생성하기

function downloadFile(url, fileName) {
  let a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

위의 코드는 주어진 URL에서 파일을 다운로드하는 함수입니다. 이 함수를 호출하면 브라우저는 해당 파일을 다운로드하게 됩니다.

2. 버튼 클릭으로 다운로드 이벤트 생성하기

document.getElementById('downloadBtn').addEventListener('click', function() {
  let url = '파일URL';
  let fileName = '파일명';
  downloadFile(url, fileName);
});

위 코드에서는 downloadBtn이라는 id를 가진 버튼을 클릭했을 때 파일을 다운로드하도록 이벤트를 등록하는 과정을 보여줍니다.

3. fetch API를 사용하여 파일 다운로드하기

fetch('다운로드URL')
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(new Blob([blob]));
    const a = document.createElement('a');
    a.href = url;
    a.download = '파일명';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => console.error('다운로드 에러', error));

위 코드는 fetch API를 사용하여 파일을 다운로드하는 방법을 보여줍니다.

결론

자바스크립트를 사용하여 파일 다운로드 이벤트를 생성하는 방법을 살펴보았습니다. 위의 예시는 다양한 상황에서 파일 다운로드 기능을 구현하는 데 도움이 될 것입니다.
여러분이 사용하는 상황에 따라 적합한 방법을 선택하여 파일 다운로드를 구현해보세요.