ReactJS Next.js와 Javascript 보고 도구를 사용하는 방법
페이지 정보
작성자 GrapeCity 작성일 2022-07-29 09:20 조회 542회 댓글 0건본문
관련링크
는 React를 기반으로 한 프레임워크로 응용 프로그램을 위해 잘 정의된 구조와 개발 프로세스 및 최종 응용 프로그램을 더욱 빠르게 하는 최적화를 제공합니다. Angular 또는 Vue와 같이 일반적인 프런트엔드 프레임워크와 달리 Next.js는 서버 측 런타임 또는 빌드 시간에 응용 프로그램 페이지의 을 지원합니다.
ActiveReportsJS 컴포넌트는 브라우저 환경이 필요하며 서버 측 또는 빌드 시간에 작동할 수 없습니다. 하지만 Next.js 응용 프로그램 내에서 ActiveReportsJS 컴포넌트를 확실히 사용할 수 있습니다. 이 문서에서는 완료하기 위한 접근 방식에 대해 설명합니다.
컴포넌트 래퍼 사용
Next.js 응용 프로그램에서 ActiveReportsJS 또는 컴포넌트를 사용하려는 경우를 가정해 봅시다. 컴포넌트의 기능을 캡슐화하고 사용할 인터페이스를 노출하는 래퍼 구현은 편리할 수 있습니다. 예를 들어 여기에 기본으로 제공되는 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를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.