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

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

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-07-29 09:20 조회 533회 댓글 0건

본문

관련링크

Next.js는 React를 기반으로 한 프레임워크로 응용 프로그램을 위해 잘 정의된 구조와 개발 프로세스 및 최종 응용 프로그램을 더욱 빠르게 하는 최적화를 제공합니다. Angular 또는 Vue와 같이 일반적인 프런트엔드 프레임워크와 달리 Next.js는 서버 측 런타임 또는 빌드 시간에 응용 프로그램 페이지의 사전 렌더링을 지원합니다.

ActiveReportsJS 컴포넌트는 브라우저 환경이 필요하며 서버 측 또는 빌드 시간에 작동할 수 없습니다. 하지만 Next.js 응용 프로그램 내에서 ActiveReportsJS 컴포넌트를 확실히 사용할 수 있습니다. 이 문서에서는 완료하기 위한 접근 방식에 대해 설명합니다.

컴포넌트 래퍼 사용

Next.js 응용 프로그램에서 ActiveReportsJS Report Viewer 또는 Report Designer 컴포넌트를 사용하려는 경우를 가정해 봅시다. 컴포넌트의 기능을 캡슐화하고 사용할 인터페이스를 노출하는 래퍼 구현은 편리할 수 있습니다. 예를 들어 여기에 기본으로 제공되는 Viewer의 속성뿐만 아니라 노출하는 Report Viewer의 코드인 로드할 보고서를 가리키는 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;

이와 유사하게 Report Designer 컴포넌트의 래퍼는 다음과 같아 보일 수 있습니다.

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 Invocation에 래퍼 사용

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에는 런타임 시 컴포넌트를 로드할 수 있고 서버 측 렌더링을 방지하는 동적 가져오기 기능이 포함됩니다. 이는 Next.js 응용 프로그램 내에서 ActiveReportsJS 컴포넌트를 사용하는 데 필요합니다. 아래에는 Report Viewer 컴포넌트를 표시하고 Products.rdlx-json 보고서를 로드하는 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;

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!