与 Next.js框架集成报表Viewer

本章节主要提供ActiveReportsJS报表查看器组件的详细概述，介绍在 Next.js 应用中如何展示ActiveReportsJS 报表。

Next.js是一个基于 React 的框架，它为您的应用程序提供定义明确的结构以及使开发过程和最终应用程序更快的优化。在本章节中，我们构建了一个 Next.js 应用程序，它使用Report Viewer组件来显示简单报告的输出。

创建 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-viewer-app或任何其他名称。

安装 ActivereportsJS NPM 包

我们通过@grapecity/activereports-react NPM包分发 React 报告查看器组件，该包依赖于包含核心功能的@grapecity/activereports包。

要安装这些包的当前版本，请从应用程序的根文件夹运行以下命令。

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

将 ActiveReportsJS 报告添加到应用程序中

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 Report Viewer 包装器添加到应用程序中

为了完成React Report Viewer工作，Next.js我们需要创建一个简单的包装器。在应用程序的根目录中创建一个名为的文件夹components（如果不存在），然后将ReportViewer.tsx包含以下代码的文件添加到其中。

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 Viewer 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。您可以使用报表查看器用户界面测试基本功能。