[Vue3&TypeScript] dataTable의 exportCSV() 사용시 엑셀 한글 깨짐 현상 해결 방법

PrimeVue의 DataTable의 exportCSV() 메소드를 사용해서 엑셀파일 다운로드 기능이 구현되어 있는데, .csv이고, 한글이 깨지는 문제가 발생한다.

const dt = ref();  //dataTable ref="dt"
const exportCSV = async () => {
  const allData = await getUserCSV(); // 전체 데이터 가져오기
  dt.value.exportCSV({}, allData);
};

exprotCSV()로 처리시 해결방법이 없는 것 같다. ChatGPT가 알려주는 방식으로 4가지를 시도해보았으나 한글 깨짐 문제 발생은 여전하다. 그래서 gpt가 알려준 100%확실한 방법은 xlsx로 다운로드 하는 방식이다.

xlsx로 엑셀 다운로드 처리 방법

1. npm 를 이용하여 xlsx 설치

npm install xlsx

2. 심플한 예제 코드

import * as XLSX from 'xlsx';

const exportExcel = async () => {
  const allData = await selectCSV();
  const ws = XLSX.utils.json_to_sheet(allData);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  XLSX.writeFile(wb, 'export.xlsx'); // Excel 파일로 저장
};

3. 공통함수로 분리하여 여러곳에서 사용가능하도록 처리

import * as XLSX from 'xlsx';


/**
 * Excel(.xlsx)로 내려받기
 *
 * @param data - 내보낼 원본 데이터 배열
 * @param headerMap - DB 필드명 → 사용자 표시명 맵핑
 * @param filename - 저장할 파일명 (확장자 제외)
 * @param sheetName - 시트 이름 (기본: 'Sheet1')
 */
export function exportToExcel<T extends Record<string, any>>(
  data: T[],
  headerMap: Record<keyof T, string>,
  filename: string,
  sheetName = 'Sheet1'
) {

  // if (!data || data.length === 0) {
  //   alert("내보낼 데이터가 없습니다.");
  //   return;
  // }

  // 키 순서 보장
  const keys = Object.keys(headerMap) as (keyof T)[];
  const headers = keys.map(k => headerMap[k]);

  // 데이터 변환
  const rows = data.map(row => keys.map(k => row[k]));

  // 시트 생성 (2차원 배열로)
  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows]);

  // 컬럼 너비 자동 조정
  worksheet['!cols'] = headers.map((header, idx) => ({
    wch: Math.max(
      header.length,
      ...rows.map(row => String(row[idx] ?? '').length)
    ) + 2,
  }));

  // 워크북 생성 및 저장
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
  XLSX.writeFile(workbook, `${filename}.xlsx`);
}

4. 사용방법

const exportExcel = async () => {
  const allData = await selectContractCSV();

  if (!allData || allData.length === 0) {
    alert("내보낼 데이터가 없습니다.");
    return;
  }

  // 헤더 맵핑용 객체(Object) 생성 : TypeScript에서는 Record<string, string>
  const headerMap = {
    seq: '순번',
    contractNo: '계약번호',
    tradeNm: '계약명',
    customerNm: '계약자명',
    status: '계약상태',
    contractDt: '계약일',
    saveDate: '등록일',
  };

  exportToExcel(allData, headerMap, "다운로드명");
};

위 내용을 공통함수로 구현할 수 있다.

[Vue3&TypeScript] json타입의 데이터 객체를 Map구조로 변환시키는 공통함수 만들기 (convertColsToHeaderMap)