Next.js 에서 ActiveReportsJS 리포트 디자이너 시작하기

Next.js는 개발 프로세스 및 최종 애플리케이션을 더 빠르게 만드는 최적화와 함께 애플리케이션에 대해 잘 정의된 구조를 제공하는 React 기반 프레임워크입니다. 이 튜토리얼에서는 Report Viewer 컴포넌트를 사용하여 간단한 보고서의 출력을 표시하는 Next.js 애플리케이션을 빌드합니다.

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

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

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

새로 만든 프로젝트의 이름과 기능을 묻습니다. 아래 답변을 사용할 수 있습니다.

이 튜토리얼에서는 새로 생성되는 프로젝트 이름을 arjs-nextjs-viewer-app 로 하겠습니다.

√ What is your project named? ... arjs-nextjs-viewer-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-react NPM 패키지를 통해 React 보고서 뷰어 컴포넌트를 제공하며, 이것은 핵심 기능을 포함하는 @mescius/activereportsjs 패키지에 의존합니다.

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

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

응용 프로그램에 ActiveReports 보고서 추가하기

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

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

응용 프로그램에 React 보고서 뷰어 Wrapper 추가하기

React Report Viewer가 Next.js와 함께 작동하도록 하려면 간단한 래퍼를 만들어야 합니다. 애플리케이션 루트에 components라는 폴더가 존재하지 않는 경우 생성하고 다음 코드가 포함된 ReportViewer.tsx 파일을 추가합니다.

import { Viewer } from "@mescius/activereportsjs-react";
import { Props as ViewerProps } from "@mescius/activereportsjs-react";
import { PdfExport } from "@mescius/activereportsjs";
import React from "react";
// import the default theme for the report viewer 
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/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;

응용 프로그램에 보고서 뷰어 Wrapper 추가하기

pages\index.tsx 파일의 기본 콘텐츠를 다음 코드로 바꿉니다.

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

// use the dynamic import to load the report viewer wrapper: https://nextjs.org/docs/advanced-features/dynamic-import
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;

응용프로그램 실행

yarn run dev 또는 npm run dev 명령을 사용하여 애플리케이션을 실행할 수 있습니다. 기본적으로 프로젝트는 http://localhost:3000/에서 실행됩니다. 이 URL을 탐색하면 ActiveReportsJS 보고서 뷰어가 페이지에 나타납니다. 뷰어는 'Hello, ActiveReportsJS Viewer' 텍스트를 보여주는 보고서를 표시합니다. 보고서 뷰어 사용자 인터페이스를 사용하여 기본 기능을 테스트할 수 있습니다.