JavaScript 로 생성한 csv 파일에서 한글이 깨진다면?

 

📌 JavaScript 로 csv 파일 생성해서 다운로드받기

이전에 csv 포맷을 다룰 일이 생겨서 Blob 객체를 생성해서 파일을 다운로드 받도록 코드를 구현했었습니다.

 

const download = function (data) {
    const blob = new Blob([data], { type: 'text/csv' });
    const url = URL.createObjectURL(blob)

    const a = document.createElement('a')
    a.setAttribute('href', url)
    a.setAttribute('download', '파일이름.csv');
    a.click()
}

 

코드는 간단합니다.

리소스타입이 명시된 Blob 객체를 생성한 뒤 이를 가리키는 Object URL 을 생성하고,

실제 DOM Tree 에 렌더링하지않는 a 태그에 이 url 을 할당하여

클릭 이벤트를 직접 발생시켜 다운로드가 이루어지도록 하는 것입니다.

 

📌 한글 인코딩 깨짐 현상 해결하기

대부분의 브라우저 환경에서는 문제가 없었지만,

특정 환경들에서 (삼성 브라우저 or 윈도우 환경 등) 한글이 깨져서 저장되는 이슈가 있었습니다.

 

원인을 찾아보니 바이트 순서 표식(Byte Order Mark) 이라는 것을 알게 되었습니다.

일반적으로 UTF 파일은 이 BOM 을 명시해서 바이트를 읽는 순서를 명시할 수 있다고 합니다. (little-endian, big-endian)

 

한글을 포함하는 유니코드 문자는 대부분 UTF-8 로 인코딩되기 때문에

Blob 객체를 생성할 때 사용하는 데이터 맨 앞에 \ufeff 를 추가해서

우리가 생성할 csv 데이터의 인코딩 방식을 명시해줍니다.

 

const blob = new Blob(['\ufeff' + data], { type: 'text/csv' });

 

📌 참고자료

How to create and download CSV file in JavaScript ? - GeeksforGeeks

바이트 순서 표식 - 위키백과, 우리 모두의 백과사전

자바스크립트에서 csv 파일 생성시 한글 깨짐 문제 해결