SPA 에서 파일 다운로드

SPA Single Page Application 로 작성중인 웹 응용프로그램에서 파일 다운로드를 구현할 때, 새 창으로 다운로드할 파일의 URI를 제공해서 처리하면 매우 편리하게 파일을 다운로드할 수 있습니다.

const fileDownloadUri = '파일 다운로드 URI';
window.open(fileDownloadUri, '_blank');

파일 URI와 함께 인증이 필요할 때, 쿠키를 사용중이면 동일하게 사용하면 됩니다.

그런데, 쿠키를 사용하지 않고, JWT 등을 사용해서 요청 헤더에 데이터를 제공하는 형식으로 인증을 처리중이면, 새창을 열어서 처리하는 방식으로는 처리가 불가능합니다.

이 때, 사용할 수 있는 간단한 코드조각을 npm 패키지로 공유합니다.

📢 @bbon/filedownload 패키지

npm: @bbon/filedownload 패키지 페이지에서 패키지를 확인하실 수 있습니다.

🛠 설치

$ npm install @bbon/filedownload
$ yarn add @bbon/filedownload

🎮 사용

HTTP 요청은 사용중인 패키지 또는 API를 사용하시면 됩니다.

응답 형식은 BLOB 으로 지정되어야 합니다.

AWS S3, Azure Storage, Google Cloud Storage 등의 클라우드 객체 저장소에 사용이 가능합니다.
물론, 직접 구현한 웹 응용프로그램의 BLOB 응답에도 사용가능합니다.

예제 코드에서 HTTP 요청은 Axios 패키지를 사용합니다.

const requestConfig: AxiosRequestConfig = {
    ...Axios.defaults,
    responseType: 'blob',
};

Axios.get(fileDownloadUrl, requestConfig)
    .then((res) => {
        if (res) {
            const contentType =
                res.headers['content-type'] || 'application/octet-stream';
            const helper = new FileDownloadHelper();
            helper.download({
                data: res.data,
                filename: fileName,
                contentType,
            });
        }
    })
    .catch((err) => {
        console.error(err);
    })
    .finally(() => {
        setLoading(false);
    });

전체코드는 GitHub: bbon-filedownload-sample 저장소에서 확인하실 수 있습니다.

😎 예제 페이지에서 동작을 확인하실 수 있습니다. (다운로드 버튼을 클릭하면, 빨간 이미지를 다운로드합니다. 확인하실 때 눈👁을 조심하십시오.)

이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.

This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다