ActiveReportJS Vite.js 报表设计器

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

在 Vite.js(React) 框架中集成纯前端报表设计器

Vite.js(https://vitejs.dev/)是现代前端开发的构建工具。它利用[本机 ES 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)来改善开发体验并生成高度优化的生产构建。本教程将向您展示如何在Vite.js React application。

1、创建一个 Vite.js React 应用程序

创建Vite.js React应用程序最简单的方法是使用create-vite脚手架工具。从命令提示符或终端运行以下命令以创建具有默认选项的应用程序。

# npm 6.x
npm init vite arjs-vite-react-app --template react

# npm 7+, extra double-dash is needed
npm init vite arjs-vite-react-app -- --template react

#yarn
yarn create vite arjs-vite-react-app --template react

2、安装 ActivereportsJS npm 包

我们通过依赖于包含核心功能的@grapecity/activereports 包的[@grapecity/activereports -react](https://www.npmjs.com/package/@grapecity/activereports) NPM 包分发 React Report Designer 组件。要安装这些包的当前版本，请从应用程序的根文件夹运行以下命令。

# npm
npm install @grapecity/activereports-react@latest

# yarn
yarn add @grapecity/activereports-react@latest

3、配置 Vite.js

要让 ActiveReportsJS 在 Vite.js React 应用程序中工作，您需要调整 Vite.js 配置。在应用程序的根文件夹中创建一个名为的新文件alias.js，并将以下代码添加到其中：

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

然后，打开vite.config.js应用程序根文件夹中的文件并将其内容替换为以下内容：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
});

4、导入 ActiveReportsJS 样式

打开src\index.css文件并将其内容替换为以下代码，它导入默认的报表设计器组件样式并为将托管React 报表设计器组件的元素定义样式。

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}

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

6、将 React Report Designer 添加到应用程序中

将默认代码替换src\App.jsx为以下代码

import React from "react";
import "./App.css";
import { Designer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="designer-host">
      <Designer report={{ id: 'report.rdlx-json', displayName: "sample report" }} />
    </div>
  );
}

export default App;

7、运行和测试应用程序

要在开发模式下运行应用程序，请从应用程序的根文件夹运行以下命令：

# npm
npm run dev
or
# yarn
yarn dev

如果命令失败并显示错误'vite' is not recognized as an internal or external command, operable program or batch file，则删除该node_modules文件夹并运行npm install或yarn重新安装所有必需的包。然后运行npm run dev或yarn dev再次。请注意应用程序构建的惊人性能和热模块重新加载的速度。ActiveReportsJS 报表设计器将出现在应用程序的起始页上并显示报表设计。您可以通过添加报表项、设置它们的属性、创建数据源等来测试基本功能。有关如何使用报表设计器组件的更多信息，请访问报表设计器界面页面。