압축 파일과 Excel 파일 다운로드

Hyor·2024년 11월 15일

React download file

개요

파일 다운로드를 개발하면서 발생했던 문제점 및 해결방법을 정리한 내용

문제점 및 해결 방법

인증이 필요한 파일이기에 공개저장소에 업로드 불가

문제: 인증이 필요한 파일을 외부 공개 저장소에 업로드할 수 없어 직접 접근이 불가능함.

해결: API 요청을 통해 파일을 받아오고, 동적으로 <a /> 태그를 생성해 해당 파일을 바인딩하여 다운로드 가능하게 하는 함수를 개발.

async function onClickDownload(...) {
	...
	const contentDisposition = res.headers.get('Content-Disposition');

	let fileName = 'file';
	if (contentDisposition) {
		const filenameRegex = /filename\*=UTF-8''([^;=\n]*)/;
		const matches = filenameRegex.exec(contentDisposition);
		if (matches != null && matches[1]) {
			fileName = decodeURIComponent(matches[1]);
		}
	}

	const blob = await res.blob();
	const objectUrl = window.URL.createObjectURL(blob);
	const link = document.createElement('a');
	link.href = objectUrl;

	link.setAttribute('download', fileName);
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
}

Excel 파일에 한글이 깨지는 현상 발생

문제: 다운로드한 Excel 파일에서 한글이 깨져 출력되는 현상 발생.

해결: 파일에 new Blob(['\ufeff', blob])을 추가해 인코딩을 수정함으로써 문제 해결

async function onClickDownload(path: string, init?: RequestInit) {
	...
	const blob = await res.blob();
	const file = new Blob(['\ufeff', blob]);
	const objectUrl = window.URL.createObjectURL(file);
	...
}

압축해제가 안되는 현상 발생

문제: Excel 파일에 한글이 깨짐을 해결하기 위해 인코딩했으나, 압축 파일의 경우 BOM이 포함되면서 압축 해제 시 오류가 발생하는 문제 발견.

해결: Excel 다운로드 시에만 인코딩하여 다운로드하게 변경

async function onClickDownload(path: string, init?: RequestInit) {
	...
	const fileExtension = fileName.split('.').pop() ?? '';
	const isExcelFile = ['xls', 'xlsx', 'csv'].includes(fileExtension);
	const file = isExcelFile
		? new Blob(['\ufeff', blob], { type: blob.type })
		: blob;
    ...
}