在ActiveReportsJS viewer 中预览报表

下面步骤描述了如何将ActiveReportsJS Viewer添加到Web应用程序。

向Web应用程序项目中添加HTML页面。
在项目的根目录中创建“scripts”文件夹，并将以下ActiveReportsJS脚本复制到此文件夹。
- ar-js-core.js
- ar-js-viewer.js
在项目中添加'css'文件夹并将 ar-js-viewer.css 文件复制到此文件夹。
添加'reports' 文件夹并复制要查看的报表文件。
将添加的HTML页的内容修改为-
- 添加对查看器脚本和CSS样式的必要引用，
- 初始化查看器组件，
- 添加_div_u元素以包含查看器，以及，
- 使用 viewer.open()方法在查看器中打开报表。

下面的代码显示了完整的实现。

    <head>
        <title>ActiveReportsJS Viewer</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="css/ar-js-viewer.css" />
        <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script> <!--to run application in IE-->
        <script type="text/javascript" src="scripts/ar-js-core.js"></script>
        <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
    </head>
    <body onload="load()">
        <div id="ARJSviewerDiv" style="height: 100%"></div>
        <script>
            function load() {
                const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
                viewer.open('/reports/InvoiceList.rdlx-json');

            }
        </script>
    </body>

Note: 在创建查看器对象之前，必须加载 ar-js-core.js脚本。

按F5运行这个项目。

注意:

如果使用Internet Explorer浏览器，则需要添加ie-polyfills.full.min.js脚本。
根据Web服务器的不同，您可能需要将.rdlx json mimetype添加到Web配置文件中。