ActiveReportJS Next.js 报表设计器

本章主要展示了如何在 Next.js 框架中集成ActiveReportsJS纯前端报表设计器。

在 Next.js框架中集成纯前端报表设计器

Next.js是一个基于 React 的框架，它为您的应用程序提供定义明确的结构以及使开发过程和最终应用程序更快的优化。在本教程中，我们构建了一个使用Report Designer组件的 Next.js 应用程序，并加载了一个简单的报表以供编辑。

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

2、安装 ActivereportsJS NPM 包

我们通过依赖于包含核心功能的@grapecity/activereports 包的@grapecity/activereports-react NPM 包分发 React Report Designer 组件。

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

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

3、将 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"
      }
    ]
  }
}

4、将 React Report Viewer 包装器添加到应用程序中

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

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;

5、将 Report Designer Wrapper 添加到应用程序中

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;

6、运行和测试应用程序

您可以使用yarn run dev或npm run dev命令运行应用程序。默认情况下，该项目在http://localhost:3000/运行。如果您浏览此 URL，ActiveReportsJS 报表设计器将出现在应用程序的起始页上并显示报表设计。您可以通过添加报表项、设置它们的属性、创建数据源等来测试基本功能。有关如何使用报表设计器组件的更多信息，请访问报表设计器界面页面。