화면과 내보내기 스타일 분리

이 데모 기능을 쉽게 설명하기 위해 일부러 그리드의 스타일을 다크 테마로 강제 전환한 것 입니다.

그리드는 기본적으로 현재 모습 그대로를 엑셀, PDF 로 내보내기 합니다. 그러나 다크 테마 사용자가 다크한 모습으로 엑셀, PDF 로 내보내기를 원치 않기 때문에 이 기능이 추가되었습니다.

웹에서 보여지는 그리드와 엑셀, PDF로 내보내기 하는 스타일을 분리하여 내보내기 할 수 있습니다.

엑셀, PDF 내보내기를 할 때 속성으로 useExportStyle : true 를 설정하십시오.

■ useExportStyle: true — 내보내기 전용 기본 서식

테마 CSS의 -for-export 클래스를 사용합니다. v3.0.18 버전 이상에서는 모든 테마의 CSS 파일에 -for-export 로 끝나는 CSS가 존재합니다.

현재 사용하는 v3.0.18 버전 이상에서 -for-export 로 끝나는 CSS 클래스명을 확인하십시오.

예를 들어 헤더는 aui-grid-default-header 가 아닌 .aui-grid-default-header-for-export에서 정의한 스타일로 내보내기를 적용합니다.

즉, 웹 상의 그리드에 출력되는 CSS와 엑셀, PDF 내보내기용 CSS 클래스가 분리되어 적용됩니다.
■ exportStyle — 사용자 클래스의 내보내기 서식

useExportStyle: true일 때, style, styleFunction, rowStyleFunction 및 헤더와 푸터에 사용한 CSS 클래스를 원하는 형태로 따로 정의합니다.

키에는 점(.) 없이 클래스명을 적습니다. 지정한 속성만 변경하며, 생략한 클래스와 속성은 기존 정의를 사용합니다. 사용자 강조색을 자동으로 바꾸는 옵션은 아니므로 필요한 클래스는 직접 지정합니다.

// 화면의 테마는 유지하고, 내보낸 파일에 사용할 기본 서식과 사용자 서식을 지정합니다.
AUIGrid.exportToXlsx(myGridID, {
    fileName: "화면과_내보내기_스타일_분리",
    // 화면용 기본 CSS 대신 테마 CSS의 -for-export 클래스를 읽습니다.
    // 기본 글자, 헤더, 본문, 푸터, 행 배경과 행 번호 등의 서식에 적용합니다.
    // 기본값은 false이며, 생략하면 기존 화면 스타일로 내보냅니다.
    useExportStyle: true,
    // 사용자 클래스는 자동 변경되지 않으므로 내보낼 서식을 별도로 지정합니다.
    // 점(.) 없는 클래스명을 사용하며, 지정하지 않은 속성은 기존 값을 유지합니다.
    exportStyle: {
        "export-product": { backgroundColor: "#eff6ff", color: "#1d4ed8" },
        "export-price": { backgroundColor: "#eefbf5", color: "#166534" },
        "export-price-high": { backgroundColor: "#fff3dc", color: "#a15c07" },
        "export-country-summary": { backgroundColor: "#e8eef7", color: "#243f62" },
        "export-product-summary": { backgroundColor: "#f1f5f9", color: "#475569" },
        "aui-grid-my-footer-sum-total": { backgroundColor: "#e1f1ea", color: "#14532d" }
    }
});
// PDF도 exportToPdf()에 같은 옵션과 fontPath를 지정합니다.