在纯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="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.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的实例公开了方法和属性，可用于自定义查看器的外观，预览报告，打印或导出它们。

在纯JavaScript 应用中集成Viewer控件

ActiveReportsJS脚本和样式

初始化ActiveReportsJS Viewer组件

相关链接