ActiveReportsJS 与 React 集成

本节我们主要介绍了如何在React 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

使用 Node 包管理器

必备文件

• Node.js
• Yarn
• 创建 React App - 使用安装 React 应用程序的全局工具
  

   npm install create-react-app -g

      或

  yarn global add create-react-app

以下步骤创建 React 应用程序

1. 在命令控制台中输入以下命令来创建新的React应用程序
   

  create-react-app arjs-react

2. 将此目录设为工作目录
   

   cd arjs-react

3. 安装ActiveReportsJS React包
   

   npm install @grapecity/activereports-react

            或

  yarn add @grapecity/activereports-react

4. 将设计好的报表文件放到'public' 文件夹下。

5. 修改 'src/App.js' 文件导入所需的样式及脚本文件:

   import React from 'react';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import { Viewer } from '@grapecity/activereports-react';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

   class App extends React.Component {
    _viewer = Viewer;

    render() {
         return (<div className="demo-app" style={{ height: '1000px'}} >
                    <Viewer
                      report={{ Uri: "InvoiceList.rdlx-json" }}
                      sidebarVisible={true} toolbarVisible zoom='100%' />
                    </div>);
       }
     }
  export default App;

6. 添加导出功能必须添加以下代码，表示支持PDF,html,Excel 导出。

   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

这些功能模块不需要加载Viewer就可执行导出功能。

7. 在命令控制台中，输入以下命令运行该应用程序
   

   npm start

      或

   yarn start

您将在浏览器中中查看到运行的应用程序(localhost:3000)。