谷歌搜破解版：ActiveReportsJS 3.2中文版是一个客户端报告解决方案，可用于各种不同的前端框架和库。从 vanilla JavaScript 到 NuxtJS，ARJS 在设计应用程序和使用其组件时非常灵活。在本文中，我们将讨论如何通过 Visual Studio Code 在您的 React 应用程序中简单地添加和自定义查看器组件，步骤如下：
安装依赖项
如果您已经创建了一个 React 应用程序，让我们首先通过 Visual Studio Code 中的终端使用以下命令在您的应用程序中安装 @grapecity/activereports-react 包：
npm install @grapecity/activereports-react如果您没有创建 React 应用，请先使用以下命令创建一个：
npm init react-app arjs-viewer-app导入样式
将依赖项安装到我们的项目中后，我们可以将样式添加到 App.css 文件中，以确保查看器组件显示良好。我们还将设置将托管我们查看器的 #viewer-div 元素的样式：
@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";
#viewer-host {
width: 100%;
height: 100vh;
}创建报告文件
下一步，我们想将 ARJS 报告文件添加到我们的应用程序中。现在，让我们通过代码创建一个或将设计人员创建的报告拖到我们的项目文件夹中来实现这一点。无论哪种方式，让我们将报告文件放入我们应用程序的 /public 目录中。
由于我们的报告使用 .rdlx-json 扩展名，我们可以使用 JSON 语法格式化将在报告中显示的属性和控件。例如，我们可以通过解决方案资源管理器创建一个新文件，方法是右键单击公用文件夹并选择“新建文件”。我们将其命名为“report-test.rdlx-json”。在该文件中，添加以下代码：
{
"Name": "report-test",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Testing the textbox!",
"Style": {
"FontSize": "20pt"
},
"Width": "8.5in",
"Height": "1.5in"
}
]
}
}如果您想了解有关通过我们的 API 创建报告的信息，请在此处深入查看我们的文档，了解可以在运行时添加到报告中的内容。
将查看器组件集成到我们的应用程序中
现在在 App.js 文件中，让我们添加以下代码来让查看器组件显示在我们的页面上。这也将我们刚刚制作的报告链接到我们的查看器组件。
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 start”。要解决此问题，请将 package.json 文件中的启动脚本更改为以下内容：
"start": "react-scripts --max_old_space_size=8192 start"在终端中使用“npm start”命令运行项目。如果一切顺利，您将在页面上看到查看器组件以及嵌入其中的报告文件。如果您遇到更多问题或错误，请向我们的支持团队开票以获得更多帮助。
主题编辑器
如果您想自定义报表查看器的颜色、字体和主题，您可以使用我们网站上的主题编辑器来实现。选择您要使用的设置并在我们的页面上预览查看器组件。找到您喜欢的主题后，从页面底部的按钮下载 CSS 样式。之后，将文件移动到应用程序中的样式文件夹 (node_modules/@grapecity/activereports/styles) 以覆盖默认查看器主题。如果您转而使用预先创建的主题，您可以在此处了解多种选择。
