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

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

Next.js 응용 프로그램 만들기

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

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

새롭게 생성하는 프로젝트의 이름이나 기능에 대한 몇 가지 질문이 있으며, 아래의 답변을 사용할 수 있습니다.

√ What is your project named? ... arjs-nextjs-designer-app
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias (@/*)? ... No

ActivereportsJS NPM 패키지 설치

핵심 기능이 포함된 @mescius/activereportsjs 패키지에 의존하는 @mescius/activereportsjs-react NPM 패키지를 통해 React 보고서 디자이너 컴포넌트를 배포합니다 .

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

npm install @mescius/activereportsjs-react@latest
# or
yarn add @mescius/activereportsjs-react@latest

응용 프로그램에 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 보고서 디자이너 래퍼 추가

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

import { Designer } from "@mescius/activereportsjs-react";
import { DesignerProps } from "@mescius/activereportsjs-react";
import React from "react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/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 보고서 디자이너가 나타나고 보고서 디자인이 표시됩니다. 보고서 항목 추가, 해당 속성 설정, 데이터 소스 생성 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 구성 요소를 사용하는 방법에 대한 자세한 내용은 보고서 디자이너 인터페이스 페이지를 참조하십시오 .