第一个 ActiveReportsJS 项目

设计好的报表模板文件之后，接下来这一步骤，我们就需要将报表与页面集成了。以下步骤描述了，如何在Web应用中添加 ActiveReportsJS Viewer 将报表展示在页面中。

新建‘Scripts’文件夹，将 ActiveReportsJS 所需的js文件拷贝到当前文件夹下,可从安装包dist文件夹找到以及 locales的文件加载资源文件用于设置Viewer语言。注意 ar-js-core.js 必须在 ar-js-viewer.js之前添加引用
- ar-js-core.js
- ar-js-viewer.js
- ar-js-locales.js
- ar-js-pdf.js
- ar-js-xlsx.js
- ar-js-html.js
- ie-polyfills.js
添加‘css’ 文件夹并拷贝 ar-js-viewer.css 文件到css文件夹下或通过CDN 引用。
- ar-js-viewer.css
添加‘reports’ 文件夹，将设计的报表文件拷贝到该路径下，注意报表名称。
新建 HTML 页面

可以使用Visual Studio Code 新建文件后设置保存格式为 HTML。声明一个div宿主元素,该元素将用于加载Viewer

输入以下代码并保存为 index.html：

<!DOCTYPE html>
<html lang="en">
<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.js"></script> &lt;!&ndash;to run application in IE&ndash;&gt;-->
    <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-locales.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 onload="load()">
<div id="ARJSviewerDiv" style="height: 800px"></div>
<script>
    function load() {
        var options = {language:'zh'};        
           var viewer = new ActiveReports.Viewer('#ARJSviewerDiv',options);
           viewer.open('reports/TestReport.rdlx-json',options );     
    }
</script>
</body>
</html>

使用 Edge 浏览器打开Html 页面，即可预览效果。