자바스크립트 엑셀 csv 한글 깨짐 해결하는 방법 (Javascript export CSV encoding issue)

자바스크립트 xlsx csv 한글 깨짐 해결하는 방법

자바스크립트 xlsx 라이브러리를 활용해서 구글 스프레드시트 csv 파일을 읽어올 때 한글이 깨지는 현상이 발생했는데 이를 해결하는 방법입니다.

xlsx 라이브러리

xlsx

.xlsx 파일의 경우 readAsBinaryString 메서드로 잘 처리 되었지만, .csv, .tsv 파일은 한글 깨짐 현상이 발생했습니다. 한글 깨짐 현상이 발생하는 케이스의 경우는 readAsText 메서드를 활용하면 정상적으로 파일을 읽어올 수 있습니다.

해결 방법

// 엑셀 확장자 타입에 따라 다른 방식으로 파일을 읽어온다.
function readFileAsync(file: RcFile, type?: string) {
  return new Promise<string | ArrayBuffer | null>((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = () => {
      resolve(reader.result);
    };

    if (type === 'xlsx' || type === 'xls') {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsText(file);
    }

    reader.onerror = reject;
  });
}

사용법

const getJsonDataFromExcel = (file_data: string | ArrayBuffer | null) => {
  const work_book = XLSX.read(file_data, { type: 'binary' });
  const work_sheet_name = work_book.SheetNames[0];
  const work_sheet = work_book.Sheets[work_sheet_name];
  const pre_json_data = XLSX.utils.sheet_to_json(work_sheet, { header: 1, raw: false });
};

const parseDatafromExcel = async (file: RcFile) => {
  const file_extension = file.name.split('.').pop();

  const file_data = await readFileAsync(file, file_extension);
  const json_data = getJsonDataFromExcel(file_data);
};