V2
V2V1

在纯JavaScript 应用中集成Viewer控件

此页面提供ActiveReportsJS报表查看器组件的详细概述。 您可以查看入门指南教程,以获取有关将该组件集成到纯JavaScript应用程序的简明指南。

ActiveReportsJS脚本和样式

要在纯JavaScript应用程序中使用ActiveReportsJS Viewer组件,它应包括以下脚本和样式:

  • ar-js-core.js:必需,提供核心功能
  • ar-js-viewer.js:必需,提供查看器组件
  • ar-js-viewer.css:必需,提供查看器组件的默认样式
  • ar-js-pdf.js:可选,提供导出为PDF
  • ar-js-xlsx.js:可选,提供导出到XLS
  • ar-js-html.js:可选,提供导出到HTML

包含这些脚本的最简单方法是使用CDN引用,例如:

<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-viewer.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-pdf.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-xlsx.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-html.js"></script>

或者,您可以从ActiveReportsJS 下载页面. 下载这些脚本和样式。 您可以分别在下载包的“ dist”和“ styles”文件夹中找到它们。

最后, 可以将@grapecity/activereports 软件包安装在应用程序的文件夹中,并且可以从`node_modules \ @grapecity \ activereports \ dist \和node_modules \ @grapecity \ activereports \ styles ``文件夹

初始化ActiveReportsJS Viewer组件

脚本和样式加载后,可以通过调用ActiveReports.Viewer构造函数并将宿主元素的CSS选择器传递给Viewer组件来进行初始化,例如:

<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
    </script>
</body>

ActiveReports.Viewer的实例公开了方法和属性 ,可用于自定义查看器的外观,预览报告,打印或导出它们。

相关链接