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

formSets

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

zoom

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

pageCount

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

reportHtml

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

함수

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

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>;

사용예

const fonts = [
    {
        name: 'regular',
        content: malgun,
        style: 'normal',
        weight: 'normal'
    }, {
        name: 'bold',
        content: malgunBold,
        style: 'normal',
        weight: 'bold'
    }
]
const oldZoom = compositeViewer.zoom;
compositeViewer.zoom = 1;
compositeViewer.exportPdf({
        fonts,
        filename: 'sample-pdf-filename.pdf',
        preview: false
    }).then(() => {
        reportView.zoom = oldZoom
    });

exportPdfBlob

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

options: PDFExportBlobOptions

정의

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

사용예

const fonts = [
    {
        name: 'regular',
        content: malgun,
        style: 'normal',
        weight: 'normal'
    }, {
        name: 'bold',
        content: malgunBold,
        style: 'normal',
        weight: 'bold'
    }
]
const oldZoom = compositeViewer.zoom;
compositeViewer.zoom = 1;
compositeViewer.exportPdfBlob({
        fonts
    }).then((blob) => {
        console.log(blob)
    });

ReportViewer GridReportViewer