ReportCompositeViewer

여러개의 양식이 복합된 리포트 객체를 만듭니다. 여러 양식 리포트 가이드를 참고하세요.

생성자

const compositeViewer = new RealReport.ReportCompositeViewer (
    container: string | HTMLDivElement,
    formSets?: ReportFormSet[],
    options?: ReportOptions
)

인자

이름	타입	필수여부	설명
container	string \| HTMLDivElement	yes	RealReport가 렌더링될 컨테이너, div 엘리멘트 또는 id 문자열
formSets	ReportForm	no	RealReport 양식 객체
options	ReportOptions	no	옵션

속성

Name	Type	Read & Write
formSets	ReportFormSet[]	Write
zoom	number	Read & Write
pageCount	number	Read
page	number	Read & Write
reportHtml	string	Read
editableItems	CompositeReportEditableItem[]	Read

formSets

type: ReportFormSet[]
Write
리포트 출력 위한 JSON 형식의 양식 코드

zoom

type: number
Read & Write
리포트 미리보기 컨테이너의 확대/축소 비율
예: 0.5 = 50% 로 축소

pageCount

type: number
Read
미리보기 전체 페이지수를 가져옵니다.

reportHtml

type: any
Read
미리보기 페이지들을 html 코드로 가져옵니다.

editableItems

type: CompositeReportEditableItem[]
Read
출력된 모든 리포트의 편집 가능한 아이템 정보 목록을 가져옵니다.
reportIndex는 뷰어에 전달한 formSets 배열 인덱스와 1:1로 대응합니다.
formSets의 각 항목에 reportId를 지정하면 아이템의 reportId로 그대로 반환됩니다. 같은 양식을 중복 표시하는 경우에도 인스턴스를 구분할 수 있습니다.

사용예

const compositeViewer = new RealReport.ReportCompositeViewer(container, [
    { form: formA, dataSet: dataA, reportId: 'ORDER-001' },
    { form: formA, dataSet: dataB, reportId: 'ORDER-002' }, // 양식 식별자 지정
]);
 
const items = compositeViewer.editableItems;
// [
//     { reportIndex: 0, reportId: 'ORDER-001', name: 'addr', value: '서울', changed: false, dataSet: 'order', field: 'addr', ... },
//     { reportIndex: 1, reportId: 'ORDER-002', name: 'addr', value: '부산', originalValue: '서울', changed: true, ... },
// ]
 
// 출력 이후 값이 변경된 아이템만 조회
const changedItems = compositeViewer.editableItems.filter((item) => item.changed);

⚠️

편집 가능한 아이템은 editable 속성이 true로 설정된 아이템입니다.
편집 가능한 아이템은 입력된 값을 구분하기 위해 name 속성이 설정되어 있어야 합니다.
복합 리포트에서 name은 리포트 간에 중복될 수 있으므로 reportIndex나 reportId를 함께 사용하세요.

editableItems는 v1.11.33 버전부터 지원합니다.

함수

Name	Description
open	리포트 열기
preview	미리보기 실행
print	보고서 출력
first	첫 번째 페이지로 이동
prev	이전 페이지로 이동
next	다음 페이지로 이동
last	마지막 페이지로 이동
zoomIn	확대
zoomOut	축소

open

리포트 폼 데이터를 반환하는 API 주소를 제공하거나, JSON 형태의 리포트 폼 데이터를 전달받아 이를 미리보기합니다.

정의

ReportCompositeViewer.open(
    source: string | (string | ReportFormSet)[],
    options?: PreviewOptions & { preview?: boolean }
)[]): void;

사용예

// API 주소 전달
compositeViewer.open('http://report.json');
 
// 직접 JSON 데이터 전달
compositeViewer.open([
    {
        "form": {
            // ...
        },
        "dataSet": {
            // ...
        }
    },
    {
        "form": {
            // ...
        },
        "dataSet": {
            // ...
        }
    }
]);
 
// 배열을 통해 API 주소와 JSON 데이터를 혼합해서 전달
compositeViewer.open([
    'http://composite-report.json',
    {
        "form": {
            // ...
        },
        "dataSet": {
            // ...
        }
    },
    'http://composite-report2.json',   
]);
 
// open 사용과 동시에 미리보기 하지 않을 경우
viewer.open('http://composite-report.json', {
  preview: false,
});
 
// preview 옵션 사용
viewer.open('http://composite-report.json', {
  paging: true,
  language: 'ko',
});

⚠️

배열에 API 주소를 사용하는 경우 응답받은 JSON의 타입이 ReportFormSet이어야 정상적으로 동작합니다.

preview

reportSource의 양식에 dataSet의 데이터를 매핑하여 완성된 리포트를 컨테이너에 미리보기 합니다.

사용예

compositeViewer.preview();

print

미리보기가 되어있는 컨테이너를 인쇄합니다.

미리보기가 되어있지 않은 경우 ReportCompositeViewer 객체에 설정되어있는 formSets 정보로 인쇄를 진행합니다.

사용예

compositeViewer.print();

getHtml

미리보기 페이지들을 HTML 형식의 코드로 가져옵니다. 이 함수의 결과는 reportHtml속성의 값과 동일한 결과를 돌려줍니다.

사용예

const previewHtml = compositeViewer.getHtml();

first

미리보기에서 맨 처음 페이지로 이동

사용예

compositeViewer.first();

미리보기에서 이전 페이지로 이동

사용예

compositeViewer.prev();

미리보기에서 다음 페이지로 이동

사용예

compositeViewer.next();

last

미리보기에서 마지막 페이지로 이동

사용예

compositeViewer.last();

zoomIn

미리보기 페이지를 scale의 배율로 확대

scale: 확대 비율, 기본값은 0.1 (10%)

정의

ReportCompositeViewer.zoomIn(scale: number): void;

사용예

compositeViewer.zoomIn();
compositeViewer.zoomIn(0.2);

zoomOut

미리보기 페이지를 scale의 배율로 축소

scale: 축소 비율, 기본값은 0.1 (10%)

정의

ReportCompositeViewer.zoomOut(scale: number): void;

사용예

compositeViewer.zoomOut();
compositeViewer.zoomOut(0.3);

fitToHeight

미리보기 페이지를 컨테이너의 높이에 맞게 조정

정의

ReportCompositeViewer.fitToHeight(): void;

사용예

compositeViewer.fitToHeight();

fitToPage

미리보기 한 페이지를 컨테이너의 높이와 너비에 맞게 조정

정의

ReportCompositeViewer.fitToPage(): void;

사용예

compositeViewer.fitToPage();

fitToWidth

미리보기 페이지를 컨테이너의 너비에 맞게 조정

정의

ReportCompositeViewer.fitToWidth(): void;

사용예

compositeViewer.fitToWidth();

exportPdf

⚠️

PdfExportOptions 인자타입에는 filename을 넘겨 사용자가 원하는 파일명으로 pdf 를 내보내기 할 수 있습니다.

미리보기 페이지들을 PDF 형식의 파일로 내보내기 합니다.

options: PdfExportOptions

정의

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

💡

2가지 이상의 폰트를 PDF에 적용하는 기능은 v1.10.9 버전부터 지원합니다.

사용예

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'
    }
];
 
compositeViewer.exportPdf({
    fonts,
    filename: 'sample-pdf-filename.pdf',
    preview: false
})

exportPdfBlob

미리보기 페이지들을 Blob 형식의 PDF 데이터로 내보내기 합니다.

options: PDFExportBlobOptions

정의

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

💡

2가지 이상의 폰트를 PDF에 적용하는 기능은 v1.10.9 버전부터 지원합니다.

사용예

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'
    }
];
 
compositeViewer.exportPdfBlob({
    fonts
});

ReportViewer GridReportViewer