(2025.03.09) JSON to CSV 셀 데이터로 변환
- JSON data type: string, object, array, boolean, null 딱 5종!
- BOM(Byte Order Mark) 추가로 한글깨짐 방지
- 특수문자처리: 쌍따옴표, \n, \r
// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
<button type="button" onclick="downloadCSV(data)">CSV다운로드</button>
</body>
</html>// index.js
const data = {
"resultList": [
{
"a": 1,
"b": 1,
"k": {
"question1": {
"무궁화 '꽃'이": "100",
"The least amount you would feel comfortable paying": "100"
}
}
},
{
"a": 2,
"b": 2,
"c": 3,
"k": "피었습니다"
},
{
"a": 2,
"b": 2,
"c": 3,
"k": [
{
"멀티답1": {
"type1": "하마"
}
},
{
"멀티답2": {
"type2": "코끼리"
}
}
]
},
{
"a": 2,
"b": true,
"c": -3.259,
"k": null
},
],
"keyList": [
"a",
"b",
"c",
"k"
]
}
function downloadCSV(data) {
const escapeCSVValue = (value) => {
if (!value) return '';
if (typeof value === 'number') return value;
let stringValue = value;
// JSON 객체 또는 배열인 경우 문자열로 변환
if (typeof value !== 'string') {
stringValue = JSON.stringify(value);
}
// 큰따옴표 (\")가 포함된 경우 이스케이프 처리
stringValue = stringValue.replace(/"/g, '""');
// 쉼표(,), 줄바꿈(\n, \r)이 포함된 경우 큰따옴표로 감싸기
if (stringValue.includes(',') || stringValue.includes('\n') || stringValue.includes('\r')) {
stringValue = `"${stringValue}"`;
}
return stringValue;
}
const { resultList, keyList } = data;
// 1. CSV 헤더 생성
const header = keyList.join(',');
// 2. resultList 데이터를 CSV 포맷으로 변환
const rows = resultList.map(row =>
keyList.map(key => escapeCSVValue(row[key])).join(',')
);
// 3. 전체 CSV 문자열
const csvContent = [header, ...rows].join('\n');
// 4. **UTF-8 BOM 추가 (한글 깨짐 방지)**
const BOM = '\uFEFF'; // BOM 추가
const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
// 5. 파일 다운로드
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'data.csv');
link.click();
}
// 실행
//downloadCSV(data);
반응형
'Script Language' 카테고리의 다른 글
| React.js, 2024 (0) | 2024.05.10 |
|---|---|
| Python summary (updated: 2024.05.16) (0) | 2023.05.10 |
| [JavaScript] 정규식 regexp 사용 기록 (0) | 2017.07.09 |
| [JavaScript] 요약of요약 - 짬짬히정리중.. (0) | 2016.12.14 |
