V1
V1

第一个 ActiveReportsJS 项目

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

  1. 新建‘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
  1. 添加‘css’ 文件夹并拷贝 ar-js-viewer.css 文件到css文件夹下或通过CDN 引用。
  • ar-js-viewer.css
  1. 添加‘reports’ 文件夹,将设计的报表文件拷贝到该路径下,注意报表名称。

  2. 新建 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>
  1. 使用 Edge 浏览器打开Html 页面,即可预览效果。

预览