React, TypeScript | 서버 엑셀 파일 다운로드 기능

 

interface IDownloadExcelParams {
  responseType?: ResponseType;
}

const fileAPI = {
  downloadExcel: (params: IDownloadExcelParams) => {
    return JSON.get(`file/excel`, params);
  },
}

API 정의 부분
 

  const [isDownloading, setIsDownloading] = useState(false);

  const downloadTemplate = async () => {
    try {
      setIsDownloading(true);

      const response = await fileAPI.downloadExcel({
        responseType: 'blob',
      });

      if (response.status === 200) {
        const blob = new Blob([response.data]);

        const downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.download = 'file_template.xlsx';

        downloadLink.click();
      } else {
        throw new Error(`다운로드 실패: ${response.status} ${response.statusText}`);
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsDownloading(false);
    }
  };

response 타입을 지정하지 않으면 JSON 형식으로 처리되어 Excel 파일이 손상될 수 있다.
반면 새로운 코드에서는 response 타입을 'blob'으로 설정하여 이진 데이터로 처리하면 손상 없이 파일 다운로드가 가능하다. 
 
isDownloading 변수를 만들어준 이유는 다운로드 상태일 때 다운로드 버튼을 클릭하지 못하게 하여
의도치 않게 똑같은 파일이 여러 개 다운로드 되는 것을 막기 위함이다.
 

import { Button } from 'react-bootstrap';

...

            <Button
              type='button'
              onClick={downloadTemplate}
              disabled={isDownloading}
            >
              <FontAwesomeIcon icon={faDownload} /> {t('button.file.downloadTemplate')}
            </Button>

JSX에서는 이렇게 사용할 수 있다. 
react-bootstrap의 Button을 사용하였고 isDownloading 상태일 때 disabled 되게 하였다.