V1
V1

ActiveReportsJS 与 React 集成

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

使用 Node 包管理器

必备文件

  • Node.js
  • npm
  • 创建 React App - 使用安装 React 应用程序的全局工具
    npm install create-react-app -g

      或

  yarn global add create-react-app

以下步骤创建 React 应用程序

  1. 在命令控制台中输入以下命令来创建新的React应用程序
  create-react-app arjs-react
  1. 将此目录设为工作目录
   cd arjs-react
  1. 安装ActiveReportsJS包
   npm install @grapecity/activereports-react

            或

   yarn add @grapecity/activereports-react
  1. 将设计好的报表文件放到'public' 文件夹下。

  2. 修改 '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;
  1. 添加导出功能必须添加以下代码,表示支持PDF,html,Excel 导出。
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';
  1. 在命令控制台中,输入以下命令运行该应用程序
   npm start

      或

   yarn start

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