보고서를 JSON 리소스로 로드

보고서 템플릿을 서버 측에 유지하고 런타임에 요청 시 가져올 계획이라고 가정합니다. ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식과 rdlx-json 확장명을 사용합니다. 따라서 응용 프로그램이 보고서 템플릿을 다른 JSON 리소스처럼 가져올 수 있습니다. 템플릿의 JSON이 전송되면 viewer.open 메서드에 전달할 수 있습니다. 다음 예제에서는 위에서 설명한 방법을 사용하는 Angular, React, Vue TypeScript 컴포넌트의 코드를 보여 줍니다. 예제에서 /reports/Invoice 요청은 보고서 템플릿 내용을 반환한다고 가정되었습니다. 보고서 뷰어에 보고서를 로드하기 전에 수정하는 방법도 보여 줍니다.

Angular 컴포넌트

import { ViewerComponent } from "@grapecity/activereports-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 "@grapecity/activereports-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 "@grapecity/activereports-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 ActiveReports.Viewer("#viewer-host");
fetch("/reports/Invoice")
  .then((data) => data.json())
  .then((report) => {
    report.Page.PageOrientation = "Landscape";
    viewer.open(report);
  });

Pure JavaScript 응용 프로그램에서 ActiveReportsJS 뷰어를 통합하는 방법에 대한 자세한 내용은 Pure JavaScript 통합 페이지를 참조하십시오.

전체 코드 예제는 라이브 데모를 참조하십시오.

보고서를 JSON 리소스로 로드

제품

고객 서비스

메시어스 정보

정책(Policy)