ReportViewer

const viewer = new RealReport.ReportViewer (
    container: string | HTMLDivElement,
    reportForm?: ReportForm,
    dataSet?: ReportDataSet,
    options?: ReportOptions
)

{
    "page": {
        "pageHeader": {
            "items": [
                {
                    "type": "text",
                    "text": "리포트 제목",
                    "styles": {
                        "fontSize": "25px",
                        "fontWeight": "bold"
                    }
                }
            ]
        },
        "body": {
            "items": [
                {
                    "type": "text",
                    "text": "RealReport는 Javascript를 이용해 간단하게 리포트를 출력 할 수 있습니다.",
                    "height": "100px"
                }
            ]
        }
    }
}

ReportViewer.open(
  source: string | ReportForm,
  options?: PreviewOptions & { preview?: boolean }
): void;

// API 주소 전달
viewer.open('http://report.json');
 
// 직접 JSON 데이터 전달
viewer.open({
    report: {
        // ...
    },
    page: {
        // ...
    },
    //...
});
 
// open 사용과 동시에 미리보기 하지 않을 경우
viewer.open('http://report.json', {
    preview: false,
});
 
// preview 옵션 사용
viewer.open('http://report.json', {
    paging: true,
    language: 'ko',
});

// 동기 방식으로 미리보기
viewer.preview();
// 비동기 방식으로 미리보기
viewer.preview({ async: true, pageMark: false, noscroll: true });

viewer.print();

const previewHtml = viewer.getHtml();

viewer.first();

viewer.prev();

viewer.next();

viewer.last();

ReportViewer.zoomIn(scale: number): void;

viewer.zoomIn();
viewer.zoomIn(0.2);

ReportViewer.zoomOut(scale: number): void;

viewer.zoomOut();
viewer.zoomOut(0.3);

ReportViewer.fitToHeight(): void;

viewer.fitToHeight();

ReportViewer.fitToPage(): void;

viewer.fitToPage();

ReportViewer.fitToWidth(): void;

viewer.fitToWidth();

ReportViewer.exportPdf(options: PdfExportOptions): Promise<void>;

const NotoSansbase64Fonts = await Promise.all([
    base64convert('../fonts/NotoSans.otf'),
    base64convert('../fonts/NotoSansBold.otf'),
]);
const NanumGothicbase64Fonts = await Promise.all([
    base64convert('../fonts/NanumGothic.otf'),
    base64convert('../fonts/NanumGothicBold.otf'),
]);
 
const fonts = [
    {
        name: 'NotoSans',
        content: NotoSansbase64Fonts[0],
        style: 'normal',
        weight: 'normal',
    },
    {
        name: 'NotoSans',
        content: NotoSansbase64Fonts[1],
        style: 'normal',
        weight: 'bold',
    },
    {
        name: 'NanumGothic',
        content: NanumGothicbase64Fonts[0],
        style: 'normal',
        weight: 'normal',
    },
    {
        name: 'NanumGothic',
        content: NanumGothicbase64Fonts[1],
        style: 'normal',
        weight: 'bold',
    },
];
 
viewer.exportPdf({
    fonts,
    filename: 'sample-pdf-filename.pdf',
    preview: false,
});

ReportViewer.exportPdfBlob(options: PDFExportBlobOptions): Promise<Blob>;

const NotoSansbase64Fonts = await Promise.all([
    base64convert('../fonts/NotoSans.otf'),
    base64convert('../fonts/NotoSansBold.otf'),
]);
const NanumGothicbase64Fonts = await Promise.all([
    base64convert('../fonts/NanumGothic.otf'),
    base64convert('../fonts/NanumGothicBold.otf'),
]);
 
const fonts = [
    {
        name: 'NotoSans',
        content: NotoSansbase64Fonts[0],
        style: 'normal',
        weight: 'normal',
    },
    {
        name: 'NotoSans',
        content: NotoSansbase64Fonts[1],
        style: 'normal',
        weight: 'bold',
    },
    {
        name: 'NanumGothic',
        content: NanumGothicbase64Fonts[0],
        style: 'normal',
        weight: 'normal',
    },
    {
        name: 'NanumGothic',
        content: NanumGothicbase64Fonts[1],
        style: 'normal',
        weight: 'bold',
    },
];
 
viewer.exportPdfBlob({
    fonts: fonts,
});

ReportViewer.exportImage(imageOptions?: ImageExportOptions): Promise<void>;

viewer.exportImage({ type: 'png' });
viewer.exportImage({ type: 'png', fileName: 'sample-report.png' });

ReportViewer.exportImageBlob(imageOptions?: ImageExportBlobOptions): Promise<Blob>;

viewer
    .exportImageBlob({
        type: 'png',
    })
    .then((blob) => {
        console.log(blob);
    });

ReportViewer.exportDocument(documentOptions?: DocExportOptions): Promise<void>;

viewer.exportDocument({ type: 'hwp' });

ReportViewer.exportDocumentBlob(documentOptions?: DocExportOptions): Promise<Blob>;

viewer
    .exportDocumentBlob({
        type: 'hwp',
    })
    .then((blob) => {
        console.log(blob);
    });

ReportViewer.exportDocumentsFromData(
  documentOptions: DocumentsExportFromDataOptions
): Promise<void>;

viewer.exportDocumentsFromData({
    fileName: 'sample',
    reportForm: ReportViewer.reportForm,
    dataSets: [
        {
            master: {
                type: 'band',
                values: [{ key: '1', name: '홍길동' }],
            },
            detail: {
                type: 'band',
                values: [
                    { key: '1', item: '사과', price: 1000 },
                    { key: '1', item: '바나나', price: 2000 },
                ],
            },
        },
        {
            master: {
                type: 'band',
                values: [{ key: '2', name: '김철수' }],
            },
            detail: {
                type: 'band',
                values: [
                    { key: '2', item: '홍시', price: 4000 },
                ],
            },
        },
    ],
    type: 'hwp',
});