Next.js에서 ActiveReportsJS 보고서 디자이너 시작하기

Next.js 는 개발 프로세스 및 최종 애플리케이션을 더 빠르게 만드는 최적화와 함께 애플리케이션에 잘 정의된 구조를 제공하는 React 기반 프레임워크입니다. 이 자습서에서는 보고서 디자이너 구성 요소 를 사용하는 Next.js 애플리케이션을 빌드하고 편집을 위해 간단한 보고서를 로드합니다.

Next.js 애플리케이션 만들기

Next.js 애플리케이션을 만드는 가장 쉬운 방법은 다음 앱 만들기 도구를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 Next.js TypeScript 프로젝트를 만듭니다 .

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --ts

새로 만든 프로젝트의 이름을 묻습니다. arjs-nextjs-designer-app또는 다른 이름을 선택할 수 있습니다 .

ActivereportsJS NPM 패키지 설치

핵심 기능이 포함된 @grapecity/ activereports 패키지에 의존하는 @grapecity/activereports-react NPM 패키지를 통해 React Report Designer 구성 요소를 배포합니다 .

이러한 패키지의 현재 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하십시오.

npm install @grapecity/activereports-react%npm_version%
# or
yarn add @grapecity/activereports-react%npm_version%

애플리케이션에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 JSON 형식과 rdlx-json보고서 템플릿 파일의 확장자를 사용합니다. 애플리케이션의 public폴더에서 라는 새 파일을 만들고 report.rdlx-json다음 JSON 콘텐츠를 삽입합니다.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

애플리케이션에 React Report Designer 래퍼 추가

React Report Designer작업을 수행하려면 Next.js간단한 래퍼를 만들어야 합니다. components존재하지 않는 경우 응용 프로그램의 루트에 라는 폴더를 만들고 ReportDesigner.tsx다음 코드가 포함된 파일을 추가합니다.

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;

응용 프로그램에 보고서 디자이너 래퍼 추가

파일 의 기본 내용을 pages\index.tsx다음 코드로 바꿉니다.

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

// use the dynamic import to load the report designer wrapper: https://nextjs.org/docs/advanced-features/dynamic-import
import dynamic from "next/dynamic";
const Designer = dynamic<DesignerWrapperProps>(
  async () => {
    return (await import("../components/ReportDesigner")).default;
  },
  { ssr: false }
);

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

export default Home;

애플리케이션 실행 및 테스트

yarn run dev또는 명령을 사용하여 응용 프로그램을 실행할 수 있습니다 npm run dev. 기본적으로 프로젝트는 http://localhost:3000/ 에서 실행됩니다 . 이 URL을 탐색하면 애플리케이션의 시작 페이지에 ActiveReportsJS 보고서 디자이너가 나타나고 보고서 디자인이 표시됩니다. 보고서 항목 추가, 해당 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 구성 요소를 사용하는 방법에 대한 자세한 내용은 보고서 디자이너 인터페이스 페이지를 참조하십시오 .