[]
本章主要展示了如何在 Vite.js(React) 框架中集成ActiveReportsJS纯前端报表设计器。
Vite.js(https://vitejs.dev/)是现代前端开发的构建工具。它利用[本机 ES 模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)来改善开发体验并生成高度优化的生产构建。本教程将向您展示如何在Vite.js React application。
创建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
我们通过依赖于包含核心功能的@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
要让 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"
),
},
],
},
});
打开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;
}
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"
}
]
}
}
将默认代码替换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;
要在开发模式下运行应用程序,请从应用程序的根文件夹运行以下命令:
# 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 报表设计器将出现在应用程序的起始页上并显示报表设计。您可以通过添加报表项、设置它们的属性、创建数据源等来测试基本功能。有关如何使用报表设计器组件的更多信息,请访问报表设计器界面页面。