[]
보고서 템플릿을 서버 측에 유지하고 런타임에 요청 시 가져올 계획이라고 가정합니다. ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식과 rdlx-json
확장명을 사용합니다. 따라서 응용 프로그램이 보고서 템플릿을 다른 JSON 리소스처럼 가져올 수 있습니다. 템플릿의 JSON이 전송되면 viewer.open 메서드에 전달할 수 있습니다. 다음 예제에서는 위에서 설명한 방법을 사용하는 Angular, React, Vue TypeScript 컴포넌트의 코드를 보여 줍니다. 예제에서 /reports/Invoice
요청은 보고서 템플릿 내용을 반환한다고 가정되었습니다. 보고서 뷰어에 보고서를 로드하기 전에 수정하는 방법도 보여 줍니다.
Angular 컴포넌트
import { ViewerComponent } from "@mescius/activereportsjs-angular";
@Component({
selector: "app-root",
template:
"<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
@ViewChild(ViewerComponent) reportViewer: ViewerComponent;
onViewerInit() {
fetch("/reports/Invoice")
.then((data) => data.json())
.then((report) => {
report.Page.PageOrientation = "Landscape";
this.report.open(report);
});
}
}
Angular 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Angular 뷰어 컴포넌트 페이지를 참조하십시오.
React 컴포넌트
import { Viewer } from "@mescius/activereportsjs-react";
function App() {
const viewerRef = React.useRef();
React.useEffect(() => {
async function loadReport() {
await fetch("/reports/Invoice")
.then((data) => data.json())
.then((report) => {
report.Page.PageOrientation = "Landscape";
viewerRef.current.Viewer.open(report);
});
}
loadReport();
}, []);
return (
<div id="viewer-host">
<Viewer ref={viewerRef} />
</div>
);
}
React 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 React 뷰어 컴포넌트 페이지를 참조하십시오.
Vue 컴포넌트
import { Viewer as ReportViewer } from "@mescius/activereportsjs-vue";
new Vue({
el: "#app",
components: { "arjs-viewer": ReportViewer },
template: "<arjs-viewer ref='reportViewer' />",
mounted() {
const viewer = this.$refs.reportViewer.Viewer();
fetch("/reports/Invoice")
.then((data) => data.json())
.then((report) => {
report.Page.PageOrientation = "Landscape";
viewer.open(report);
});
},
});
Vue 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Vue 뷰어 컴포넌트 페이지를 참조하십시오.
JavaScript 컴포넌트
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
fetch("/reports/Invoice")
.then((data) => data.json())
.then((report) => {
report.Page.PageOrientation = "Landscape";
viewer.open(report);
});
Pure JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Pure JavaScript 통합 페이지를 참조하십시오.
전체 코드 예제는 라이브 데모를 참조하십시오.