ajax 파일 다운로드

서론

AJAX(Asynchronous JavaScript and XML)는 웹 개발에서 많이 사용되는 기술로, 비동기적으로 데이터를 주고받을 수 있게 해줍니다. AJAX를 이용하면 사용자가 페이지를 새로고침하지 않고도 서버와 통신하여 데이터를 업데이트할 수 있습니다. 이번 글에서는 AJAX를 활용하여 파일을 다운로드하는 방법에 대해 알아보겠습니다.

파일 다운로드 기능 추가하기

AJAX를 이용하여 파일을 다운로드하기 위해서는 JavaScript를 사용해야 합니다. 먼저 서버에 파일을 다운로드할 수 있는 URL을 생성해야 합니다. 일반적으로는 서버측에서 해당 URL을 처리하는 로직을 작성해야 하지만, 이를 간단하게 하기 위해 FileSaver.js라는 라이브러리를 사용하겠습니다.

FileSaver.js는 클라이언트 측에서 파일 다운로드를 지원하는 라이브러리로, 사용자에게 파일을 다운로드할 수 있는 링크를 제공합니다. 자세한 사용법은 여기에서 확인할 수 있습니다.

먼저 FileSaver.js를 다운로드하고 HTML 파일 내에 추가합니다. 그리고 다음과 같이 AJAX 요청을 처리하는 JavaScript 코드를 작성합니다.

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/download/file', true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var blob = new Blob([xhr.response], {type: 'application/octet-stream'});
      saveAs(blob, 'file.txt');
    }
  };

  xhr.send();
}

위의 코드에서 ‘/download/file’은 파일을 다운로드할 서버의 URL입니다. 만약 파일을 다운로드할 URL이 ‘/download/file’이 아닌 다른 경로에 있다면, 적절하게 수정해주어야 합니다.

파일 다운로드 버튼 추가하기

이제 파일을 다운로드할 수 있는 버튼을 HTML 파일에 추가해보겠습니다.

<button onclick="downloadFile()">파일 다운로드</button>

위의 코드를 HTML 파일에 추가하면, "파일 다운로드"라고 적힌 버튼이 생성되며 이를 클릭하면 파일이 다운로드됩니다.

결론

이렇게 AJAX를 이용하여 파일을 다운로드하는 방법에 대해 알아보았습니다. AJAX를 활용하면 페이지를 새로고침하지 않고도 파일을 다운로드할 수 있으므로, 사용자 경험을 향상시킬 수 있습니다. AJAX를 활용한 파일 다운로드 기능은 다양한 웹앱에서 유용하게 사용될 수 있으니, 적절한 상황에서 사용해보시기 바랍니다.