문서
API
ReportCompositeViewer

ReportCompositeViewer

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

생성자

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

인자

이름타입필수여부설명
containerstring | HTMLDivElementyesRealReport가 렌더링될 컨테이너, div 엘리멘트 또는 id 문자열
formSetsReportFormnoRealReport 양식 객체
optionsReportOptionsno옵션

속성

NameTypeRead & Write
formSetsReportFormSet[]Write
zoomnumberRead & Write
pageCountnumberRead
pagenumberRead & Write
reportHtmlstringRead

formSets

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

zoom

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

pageCount

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

page

  • type: number
  • Read & Write
  • 미리보기 현재 페이지를 가져오거나 지정합니다.

reportHtml

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

함수

NameDescription
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();

prev

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

사용예
compositeViewer.prev();

next

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

사용예
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 형식의 파일로 내보내기 합니다.

정의
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 데이터로 내보내기 합니다.

정의
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
});