ActiveReportsJS 디자이너에서 보고서 미리 보기
ActiveReportsJS 보고서 디자이너에는 바로 사용 가능한 미리 보기 기능이 없어 호스팅 응용 프로그램의 코드를 설정해야 합니다. 이 페이지에서는 여러 가지 일반 시나리오에 대한 사용법을 제공합니다.
"미리 보기" 버튼 사용
ActiveReportsJS 보고서 디자이너 컴포넌트에는 도구 모음에 미리 보기 버튼이 있습니다. 그러나 이 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 이 버튼을 사용하도록 설정하려면 코드에서 디자이너 컴포넌트에 대해 onRender 작업 처리기를 구성해야 합니다. 자세한 내용은 작업 처리기 페이지를 확인하십시오. 사용자가 미리 보기 버튼을 클릭하면 ActiveReportsJS 디자이너가 onRender 처리기를 호출합니다. 디자이너가 첫 번째 인수에서 ID, 표시 이름 및 보고서 정의로 구성된 현재 표시된 보고서의 정보를 전달합니다. onRender 처리기는 ActiveReportJS 뷰어에서 보고서 정의를 로드하거나 지원되는 형식 중 하나로 보고서를 내보낼 수 있습니다. 자세한 내용은 다음 페이지를 확인하십시오.
다음은 ActiveReportsJS 보고서 뷰어에 현재 표시된 보고서를 표시하는 React 응용 프로그램용 onRender 처리기의 예입니다.
import React from "react";
import "./App.css";
import {
Viewer as ReportViewer,
Designer,
} from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";
function App() {
const viewerRef = React.useRef();
const [viewMode, setViewMode] = React.useState(false);
const onRender = (report) => {
setViewMode(true);
viewerRef.current?.Viewer.open(report.definition);
return Promise.resolve();
};
return (
<div id="app-host">
<div id="designer-host" hidden={viewMode}>
<Designer onRender={onRender} />
</div>
<div id="viewer-host" hidden={!viewMode}>
<ReportViewer ref={viewerRef} />
</div>
</div>
);
}
export default App;React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.
UI 이벤트에 대한 응답으로 보고서 미리 보기
응용 프로그램에서는 ActiveReportJS 디자이너 인스턴스의 getReport 메서드를 사용하여 현재 표시된 보고서 정보를 가져올 수 있습니다. 이러한 접근 방식은 지원되는 형식 중 하나로 보고서를 내보내는 사용자 정의 보고서 미리 보기 UI를 추가합니다. 다음은 Angular 응용 프로그램에 대해 이와 같이 구현한 예입니다.
import { Component, ViewChild } from '@angular/core';
import { DesignerComponent } from '@mescius/activereportsjs-angular';
import { Core, PdfExport } from '@mescius/activereportsjs';
@Component({
selector: 'app-root',
template:
'<div id="designer-host"><button (click)="onPdfPreview()">Pdf Preview</button><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild(DesignerComponent, { static: false })
reportDesigner: DesignerComponent;
report = { id: 'assets/report.rdlx-json', displayName: 'my report' };
onPdfPreview = async () => {
const reportInfo = await this.reportDesigner.getReport();
const report = new Core.PageReport();
await report.load(reportInfo?.definition);
const doc = await report.run();
const result = await PdfExport.exportDocument(doc);
result.download('exportedreport.pdf');
};
}React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.