realgrid style realreport

You can easily convert the grid data and layout into a report for printing using GridReportViewer (opens in a new tab).

Additional demos and documents are provided on the Real Report (opens in a new tab) homepage.

Grid report output outputs the values displayed on the screen as a report. When printing a report, you can specify the style of the report as the same as the grid with the style property.

When creating a report viewer, you can use the grid object to output a report that matches the currently displayed columns and data.

var reportOptions ={
    title: {
        text: '투자 제품 목록',
        top: '20px',
        styles: {
            fontFamily: 'Arial',
            fontSize: '3em',
            fontWeight: '700',
            borderBottom: '2px solid blue',
        },
    },
    subTitle: {
        text: '2025년 제품 목록',
        top: '70px',
        styles: {
            fontSize: '14px',
            fontStyle: 'italic',
            textDecoration: 'underline',
            paddingTop: '30px',
            paddingBottom: '30px',
        },
    },
    pageHeader: {
        items: [
            {
                value: '${page}',
                top: '0',
                right: '20px',
            },
            {
                top: '0',
                text: '/',
                right: '10px',
            },
            {
                value: '${pages}',
                right: '0',
                top: '0',
            },
        ],
    },
    gridHeader: {
        items: [
            {
                text: '상반기',
                left: '0',
                styles: {
                    fontSize: '14px',
                },
            },
            {
                text: new Date().toLocaleDateString('en-CA'),
                right: '0px',
                styles: {
                    color: 'blue',
                },
            },
        ],
    },
    pageFooter: {
        items: [
            {
                value: '${page}',
                align: 'center',
            },
        ],
    },
    layout: {
        autoWidth: false,
        columns: [
            // 리얼그리드 투자국가 컬럼을 리포트로 출력할 때 설정
            {
                name: 'KorCountry',
                styles: {
                    backgroundColor: "#92c4f6"
                },
                header: {
                    styles:{
                        backgroundColor: "#fb8e27"
                    }
                }
            }
        ],
    }
}
 
document.addEventListener('DOMContentLoaded', function () { 
    const viewer = new RealReport.GridReportViewer ( 
        "realreport", 
        gridView, 
        reportOptions 
    ); 
    viewer.preview()
})

realreport-interface 🆕realreport groupColumn 🆕