与 Vite.js 框架集成报表Viewer

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

本指南将帮助您ActiveReportsJS Report Viewer在Vite.js React application. Vite.js是一种现代构建工具，它利用原生 ES 模块来优化开发体验并生成高效的生产构建。

建一个 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
yarn create vite arjs-vite-react-app --template react

安装ActiveReportsJS及依赖

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

或者使用yarn命令：

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

配置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"
        ),
      },
    ],
  },
});

导入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 Report 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
npm run dev

或者使用 yarn 命令：

#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 组件，显示文本Hello, ActiveReportsJS Viewer。使用工具栏按钮或通过将报告导出为可用格式来测试基本功能。