javascript - Axios 파일 다운로드 기능 구현해보기

이번에는 Axios 파일 다운로드 기능을 만들어보려고 합니다. 개발을 하다 보면 자주 구현하는 기능 중에 하나가 파일 다운로드입니다. 간단한 내용이지만 정리를 해두면 좋을 것 같아 매번 정리해둔다고 하면서 한 적이 없어 이제 정리해보려고 합니다. 글의 제목은 Axios 파일 다운로드 기능 구현이지만 실제로 구현할 코드는 Axios 뿐만 아니라 fetch나 jQuery.ajax에서도 사용할 수 있는 내용입니다.

Axios 파일 다운로드 요청하기

axios({
    url: 'https://7942yongdae.tistory.com/file-download', // 파일 다운로드 요청 URL
    method: 'GET', // 혹은 'POST'
    responseType: 'blob', // 응답 데이터 타입 정의
}).then(...);

Axios를 사용하면 위의 코드처럼 서버에 요청을 전달합니다. 이 예제 코드에서 파일 다운로드를 구현할 때 가장 중요한 부분은 responseType입니다. 요청 config에 해당하는 responseType은 서버에서 전달받은 데이터 유형을 의미하는 값으로 파일 다운로드 기능을 구현 시 'blob'으로 설정이 되어야 합니다.

Axios 공식 홈페이지 - 요청 config 일부 발췌

responseType 기본값은 'json'입니다. responseType이 'blob'으로 설정되어야 하는 이유는 파일 처리 과정(서버 요청 및 응답)에서는 바이너리 데이터가 필요합니다. 뿐만 아니라 서버에서도 파일 다운로드 요청이 들어오면 응답으로 파일을 전달해줄 때 바이너리 형태로 데이터를 전달해줍니다. 그리고 뒤에서 이야기할 파일 다운로드 처리 과정에서도 JSON이나 텍스트가 아닌 바이너리 데이터가 필요합니다. 추가로 'blob'는 'blob'는 브라우저 전용 데이터 유형입니다. 그렇기 때문에 nodejs에서 사용하는 경우에는 'json'으로 설정이 되고 올바르지 않게 인식되니 주의해주세요.

자바스크립트의 Blob과 Link를 사용한 파일 다운로드 기능 구현

axios({
    url: "https://7942yongdae.tistory.com/file-download", // 파일 다운로드 요청 URL
    method: "GET", // 혹은 'POST'
    responseType: "blob", // 응답 데이터 타입 정의
}).then((response) => {
    // 다운로드(서버에서 전달 받은 데이터) 받은 바이너리 데이터를 blob으로 변환합니다.
    const blob = new Blob([response.data]);
    // 특정 타입을 정의해야 경우에는 옵션을 사용해 MIME 유형을 정의 할 수 있습니다.
    // const blob = new Blob([this.content], {type: 'text/plain'})

    // blob을 사용해 객체 URL을 생성합니다.
    const fileObjectUrl = window.URL.createObjectURL(blob);

    // blob 객체 URL을 설정할 링크를 만듭니다.
    const link = document.createElement("a");
    link.href = fileObjectUrl;
    link.style.display = "none";

    // 다운로드 파일 이름을 지정 할 수 있습니다.
    // 일반적으로 서버에서 전달해준 파일 이름은 응답 Header의 Content-Disposition에 설정됩니다.
    link.download = extractDownloadFilename(response);

    // 다운로드 파일 이름을 추출하는 함수
    const extractDownloadFilename = (response) => {
        const disposition = response.headers["content-disposition"];
        const fileName = decodeURI(
        disposition
            .match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1]
            .replace(/['"]/g, "")
        );
        return fileName;
    };

    // 다운로드 파일의 이름은 직접 지정 할 수 있습니다.
    // link.download = "sample-file.xlsx";

    // 링크를 body에 추가하고 강제로 click 이벤트를 발생시켜 파일 다운로드를 실행시킵니다.
    document.body.appendChild(link);
    link.click();
    link.remove();

    // 다운로드가 끝난 리소스(객체 URL)를 해제합니다.
    window.URL.revokeObjectURL(fileObjectUrl);
});

Axios를 사용해 서버로 파일 다운로드 요청을 한 후 응답을 받으면 처리하는 코드입니다. IE와 같이 크로스 브라우징(예: 파일 이름)에 대한 처리는 하지 않았습니다. 파일 다운로드 처리 과정은 일일이 부분 부분을 나누어 설명하는 것보다는 주석으로 설명하는 게 좋을 것 같아 예제 코드에 코멘트를 추가했습니다.

axsio-file-download.html

0.00MB

글에서 사용한 자바스크립트를 이용한 axios 파일 다운로드 코드는 첨부파일로도 제공하니 필요하신 분은 다운로드하셔서 사용하시면 됩니다.