在 Vite.js（React） 应用中展示 ActiveReportsJS 报表

Vite.js 是一种新型前端构建工具，它基于原生 ES 模块 native ES modules能够显著提升前端开发体验并且帮助开发人员构建高效能的应用程序。 本篇教程讲演示如何将设计好的ActiveReportsJS 报表集成到Vite.js 当中。

创建 Vite.js React 应用

创建 Vite.js React应用的最简单的方法是使用 create-vite 脚手架工具。在终端使用以下命令创建默认选项的应用：

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

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

或者使用 yarn 命令：

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

安装 ActivereportsJS npm 包

我们为了基于 React框架展示ActiveReportsJS 报表中，发布了 React Report Viewer 组件包，可以通过包名来引用：@grapecity/activereports-react ，该报依赖 ActiveReports 的主包 @grapecity/activereports ，主包包含了ActiveReports 的核心功能包。 为了安装这些包的当前最新版本，可通过在项目的根目录下，执行以下命令：

npm install @grapecity/activereports-react

或者使用 yarn 命令：

yarn add @grapecity/activereports-react

配置 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 reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";

export default defineConfig({
  plugins: [reactRefresh()],
  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"
        ),
      },
    ],
  },
});

导入 ActiveReportsJS 样式

打开 src\App.css 文件并使用以下代码替换内容： 导入默认的 Report Viewer 组件样式 并且定义宿主元素，用于加载报表展示工具React 报表 Viewer 组件

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

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

创建 ActiveReportsJS 报表

ActiveReportsJS 报表本质是 JSON 格式 ，并以 rdlx-json 为报表文件的后缀名。 在根路径下，创建新的文件并命名为 report.rdlx-json 并输入以下代码：

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

项目中添加 React 报表 Viewer 组件

打开src\App.jsx 文件并输入以下代码：

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

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

运行测试

在开发模式下运行应用程序，执行以下命令：

npm run dev

或者使用 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 命令。注意Vite.js 构建的应用速度和性能都非常高，当应用启动后，ActiveReportsJS Viewer组件会首先出现在页面中， Viewer中显示刚刚创建的报表文件。