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
- 미리보기 전체 페이지수를 가져옵니다.
page
- type:
number
- Read & Write
- 미리보기 현재 페이지를 가져오거나 지정합니다.
reportHtml
- type:
any
- Read
- 미리보기 페이지들을 html 코드로 가져옵니다.
함수
Name | Description |
---|---|
open | 리포트 열기 |
preview | 미리보기 실행 |
보고서 출력 | |
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();
미리보기가 되어있는 컨테이너를 인쇄합니다.
미리보기가 되어있지 않은 경우 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 형식의 파일로 내보내기 합니다.
- 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
});