如何在React应用程序中使用HTML5报告查看器

环境

描述

从R1 2022 (16.0.22.119)我们推出了专门的React报表查看器．

的HTML5报表查看器是基于HTML5, CSS和JavaScript构建的。这使得查看器几乎可以在任何JavaScript框架中使用。反应已经获得了很大的吸引力，我们想要探索如何在React应用程序中实现HTML5报表查看器，以及它的依赖关系。我们将要演示的解决方案是一个非常基本的方法来创建一个新的React应用程序，包括查看器的依赖关系，最后，显示报表查看器。

解决方案

下面的指南假设你有React的相关知识:

1. 首先使用以下CLI命令创建一个新的React应用程序:

   NPX create-react-app my-app CD my-app NPM start

   注意:你需要有节点>= 6而且NPM >= 5.2在你的机器上。

2. 观众依赖于jQuery．在jQuery库中添加CDN链接公共/ index . html：

   < script src = " https://code.jquery.com/jquery-3.3.1.min.js " > < /脚本>

3. 添加所需的剑道UI少基于主题来index . html为了设置查看器的样式:

     …

4. 创建新的资产文件夹里面公共并从Telerik Reporting安装文件夹(C:\Program Files (x86)\Progress\Telerik报告R1 2021\Html5\ReportViewer\js)。中文件的路径index . html为:

   < script src = " /资产/ telerikReportViewer-15.0.21.120.min.js " > < /脚本>

5. 添加jQuery的剑道UIJS库。另一种方法是只添加HTML5报表查看器正常工作所需的Kendo小部件的子集。该子集可在Telerik Reporting安装文件夹(C:\Program Files (x86)\Progress\Telerik Reporting R1 2021\Html5\ReportViewer\js\telerikReportViewer.kendo-15.0.21.120.min.js)，并可以复制到React应用程序的公共/资产文件夹中。然后在index . html：

   < script src = " /资产/ telerikReportViewer.kendo-15.0.21.120.min.js " > < /脚本>

6. 创建一个新的报表查看器组件(组件/ ReportViewer.js)，并相应地配置路由。新组件将包含以下模板、脚本和样式:

   import React， {Component}//组件输出呈现到DOM后，componentDidMount()方法运行。componentDidMount() {window.jQuery('#reportViewer1') . telerik_reportviewer ({serviceUrl: 'https://demos.telerik.com/reporting/api/reports/'， reportSource: {report: '报告书。trbp'}，规模:1.0,viewMode: 'INTERACTIVE'， printMode: 'SPECIFIC'， sendEmail: {enabled: true}});} render() {return 
   }}

7. 在必需的页面中(例如App.js)，渲染React组件:

   import React， {Component}进口的。/ App.css”;import ReportViewer from './components/ReportViewer';class App extends Component {render() {return (
   欢迎使用React App  
   );导出默认App;

8. 将报表查看器的默认样式设置为相应的页面样式表文件(例如App.css)：

   body {font-family: Verdana, Arial;保证金:5 px;} #reportViewer1{位置:绝对;前:70像素;底部:10 px;左:10 px;右:10 px;溢出:隐藏;明确:;｝

9. 运行

   npm开始

   

额外的资源

下载最终的React应用程序．

另请参阅

创建一个新的React应用