Next.js와 함께 Javascript 보고 도구를 사용하는 방법

Next.js은 개발 프로세스와 최종 애플리케이션을 더 빠르게 만드는 애플리케이션 및 최적화를 위한 잘 정의된 구조를 제공하는 React 기반 프레임워크입니다. Angular 또는 Vue와 같은 기존 프런트 엔드 프레임워크와 달리 Next.js는 서버 측에서 런타임 또는 빌드 시 애플리케이션 페이지를 지원합니다Pre-Rendering.

ActiveReportsJS 구성 요소는 브라우저 환경이 필요하며 서버 측에서 또는 빌드 시에 작동할 수 없습니다. 그러나 Next.js 애플리케이션 내에서 ActiveReportsJS 구성 요소를 사용하는 것은 확실히 가능합니다. 이 문서에서는 작업을 완료하는 방법에 대해 설명합니다.

구성 요소 래퍼 사용

Next.js 애플리케이션에서 ActiveReportsJSReport Viewer 또는 Report Designer 구성 요소를 사용한다고 가정합니다. 구성 요소의 기능을 캡슐화하고 이를 사용할 인터페이스를 노출하는 래퍼를 구현하면 편리할 수 있습니다. 예를 들어 다음은 기본 제공 뷰어의 속성 외에도 로드할 보고서를 가리키는 reportUri 속성을 노출하는 보고서 뷰어의 래퍼 코드입니다.

import { Viewer } from "@grapecity/activereports-react";
    import { Props as ViewerProps } from "@grapecity/activereports-react";
    import { PdfExport } from "@grapecity/activereports";
    import React from "react";
    // import the default theme for the report viewer
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";

    // eslint-disable-next-line
    const pdf = PdfExport;

    // eslint-disable-next-line react/display-name
    const ViewerWrapper = (props: ViewerWrapperProps) => {
      const ref = React.useRef<Viewer>(null);
      React.useEffect(() => {
        ref.current?.Viewer.open(props.reportUri);
      }, [props.reportUri]);
      return <Viewer {...props} ref={ref} />;
    };

    export type ViewerWrapperProps = ViewerProps & { reportUri: string };

    export default ViewerWrapper;

마찬가지로 보고서 디자이너 구성 요소의 래퍼는 다음과 같습니다.

    import { Designer } from "@grapecity/activereports-react";
    import { DesignerProps } from "@grapecity/activereports-react";
    import React from "react";
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-designer.css";

    // eslint-disable-next-line react/display-name
    const DesignerWrapper = (props: DesignerWrapperProps) => {
      const ref = React.useRef<Designer>(null);
      React.useEffect(() => {
        ref.current?.setReport({id: props.reportUri});
      }, [props.reportUri]);
      return <Designer {...props} ref={ref} />;
    };

    export type DesignerWrapperProps = DesignerProps & { reportUri: string };

    export default DesignerWrapper;

API 호출에 래퍼 사용

ActiveReportsJS API를 사용한다고 가정합니다. 이 경우 UI를 렌더링하지 않고 단순히 속성의 변경 사항을 추적하고 API 함수를 호출하는 래퍼 내에 캡슐화할 수도 있습니다. 다음은 PDFExport 래퍼의 예입니다.

   import {
      PdfSettings,
      exportDocument,
    } from "@grapecity/activereports/pdfexport";
    import { PageReport } from "@grapecity/activereports/core";

    import React from "react";

    export type PdfExportWrapperProps = PdfSettings & { reportUri: string };

    async function exportReport(props: PdfExportWrapperProps) {
      const pageReport = new PageReport();
      await pageReport.load(props.reportUri);
      const doc = await pageReport.run();
      const res = await exportDocument(doc, props);
      res.download("report.pdf");
    }

    export default function PdfExportWrapper(props: PdfExportWrapperProps) {
      React.useEffect(() => {
          if(props.reportUri?.length)
            exportReport(props);
      }, [props]);
      return null;
    }

래퍼의 동적 로딩

Next.js에는 런타임 시 구성 요소 로드를 허용하고 서버측 렌더링을 방지하는 기능Dynamic Import이 포함되어 있습니다. 이는 Next.js 애플리케이션 내에서 ActiveReportsJS 구성 요소를 사용하는 데 필요합니다. 다음은 보고서 뷰어 구성요소를 표시하고 여기에 Products.rdlx-json _report를 로드하는 Next.js 페이지의 샘플입니다. 이 코드는 래퍼의 코드가 _components\ReportViewer.tsx 파일에 있다고 가정합니다.

    import type { NextPage } from "next";
    import React from "react";
    import styles from "../styles/Home.module.css";
    import { ViewerWrapperProps } from "../components/ReportViewer";

    import dynamic from "next/dynamic";
    const Viewer = dynamic<ViewerWrapperProps>(
      async () => {
        return (await import("../components/ReportViewer")).default;
      },
      { ssr: false }
    );

    const Home: NextPage = () => {
      return (
        <div
          className={styles.container}
          style={{ width: "100%", height: "100vh" }}
        >
          <Viewer reportUri="report.rdlx-json" />
        </div>
      );
    };

    export default Home;

API 래퍼에 대해 동일한 접근 방식을 사용할 수 있습니다.

    import type { NextPage } from "next";
    import React from "react";
    import styles from "../styles/Home.module.css";

    import { PdfExportWrapperProps } from "../components/PdfExport";

    import dynamic from "next/dynamic";

    const PdfExportWrapper = dynamic<PdfExportWrapperProps>(
      async () => {
        return (await import("../components/PdfExport")).default;
      },
      { ssr: false }
    );

    const Home: NextPage = () => {
      const [report, setReport] = React.useState<string>("");
      return (
        <div
          className={styles.container}
          style={{ width: "100%", height: "100vh" }}
        >
          <button onClick={() => setReport("report.rdlx-json")}>Export Report</button>
          <PdfExportWrapper reportUri={report} pdfVersion="1.7" />
        </div>
      );
    };

    export default Home;