프론트엔드
ag-Grid로 화면과 동일한 Excel 만들기
두줄요약
ag-Grid Excel Export에서 화면과 동일한 스타일과 값을 맞추는 과정을 정리했습니다. valueFormatter, excelStyles, header 규칙을 통해 엑셀 스타일 반영 문제를 해결했습니다.
문제 상황
- 화면과 동일한 형태의 Excel 다운로드 요구
valueFormatter적용값이 엑셀에 반영되지 않고 원본 키값으로 출력- 브라우저 CSS가 Excel Export에 자동 반영되지 않음
- 헤더 스타일도 일반 셀과 같은 방식으로 적용되지 않음
원인 분석
- Excel Export가 브라우저 렌더링 결과가 아니라 별도 XML 스타일 구조로 동작
- 화면의 CSS 클래스만으로는 엑셀 스타일을 인식할 수 없음
- 헤더는 일반 셀과 다른 내부 예약 ID
header로 처리
해결 방법
processCellCallback으로valueFormatter적용 후 텍스트 반환excelStyles와cellClass,cellClassRules를 1:1로 매핑- 헤더 스타일은 커스텀 ID 대신
id: "header"규칙 사용
적용해볼 점
- 라이브러리의 export 동작과 내부 규칙을 먼저 확인
- 화면 스타일과 Excel 스타일을 분리해 설계
- 버전별 동작 차이와 공식 문서 함께 검토