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包
  yarn add @grapecity/activereport
  1. 修改 'src/app.js' 文件导入所需的样式及脚本文件:
   import React from 'react';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import * as Viewer from '@grapecity/activereports/viewer';

   class App extends React.Component {
     componentDidMount() {
         var viewer = new Viewer.Viewer('#ARJSviewerDiv');

         viewer.open({
           "Type": "report",
           "Body": {
             "Name": "Body",
             "Type": "section",
             ReportItems: [
               { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReportsJS", Height: "10in" }
             ]
           },
           "Name": "Report"
         });
     }

     render() {
         return <div className="App" id="ARJSviewerDiv" style={{height: '800px'}} />;
     }
   }
   export default App;

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

   yarn start

您将在浏览器中中查看到运行的应用程序。

使用传统的 HTML

  1. 下载 React HTML模板。 您可以从地址下载模板 https://reactjs.org/docs/try-react.html2.

  2. 将以下 ActiveReportsJS Viewer 样式和脚本文件添加到HTML模板

    • ar-js-viewer.css
    • ar-js-core.js
    • ar-js-viewer.js

    如果需要支持导出功能,可添加以下脚本:

    • ar-js-pdf.js
    • ar-js-xlsx.js
    • ar-js-html.js
  3. 修改HTML页面的内容,如下所示。

<head>
    <meta charset="UTF-8" />
    <title>ActiveReportsJS Viewer in React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <link href="css/ar-js-viewer.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script>
    <script type="text/javascript" src="scripts/ar-js-core.js"></script>
    <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
    <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
    <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body>
    <div id="ARJSviewerDiv" style="height:100%"></div>
    <script type="text/babel">
        class App extends React.Component {
        constructor(props) {
        super(props);
        }
        componentDidMount() {
        var viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
        viewer.open({
        "Type": "report",
        "Body": {
        "Name": "Body",
        "Type": "section",
        ReportItems: [
        { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReportsJS", Height: "10in" }
        ]
        },
        "Name": "Report"
        });
        }
        render() {
        return (
        <div ref="ARJSviewerDiv">
        </div>)
        }
        }
        ReactDOM.render(
        <App />,
        document.getElementById('ARJSviewerDiv')
        );
    </script>
</body>
  1. 在浏览器中查看HTML页面。