V2
V2V1

安装使用

ActiveReportsJS 的安装包是由跨平台设计器应用程序和相关的JavaScript库组成的,我们将逐一描述每个文件的作用

安装包

ActiveReportsJS 提供了三个平台的桌面设计器,Windows,macOS 及Linux 。

桌面端报表设计器应用程序

桌面端报表设计器应用程序是由Electron 编译并生成的,您可以使用桌面设计器来设计报表模板。

可通过与安装普通软件的方式来安装桌面设计器。您可以免费试用30天,试用版功能与正式版功能是完全一致的。

核心的 JavaScript库

这些 JavaScript 库包含核心功能,并提供了灵活的API API

如果您计划使用模块管理器引用ActiveReportsJS,如 webpack。您可以在 package.json文件中使用 @grapecity/activereports 从NPM 导入相关的依赖文件。

纯JS 应用程序可包含 ar-js-core.js 脚本 ,可以在dist 文件中拷贝,或者直接从CDN 引用: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-core.js

Polyfill JS文件

如果需要在Internet Explorer 11中运行ActiveReportsJS组件需要包含此文件库。 如果您计划在项目中通过模块管理器使用 ActiveReportsJS ,如webpack。 这种情况下,您可以通过在 package.json 文件中添加@grapecity/activereports 项,然后通过安装 NPM 包会自动下载polyfill js文件。

纯 JS 应用可以在安装包中dist 文件夹找到ie-polyfills.js 文件添加到项目中 也可以通过CDN 地址直接引用: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ie-polyfills.js

PDF 导出 JS 库

该 JS 文件主要是在导出PDF 文件的时候使用。可以参考 导出报表 文档。

可通过npm install 安装ar-js-pdf.js 文件,也可以在安装包的dist 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-pdf.js

XLSX 导出 JS 库

该 JS 文件主要是在导出 XLSX 格式文件的时候使用。可以参考 导出报表 文档。

可通过npm install 安装ar-js-pdf.js 文件,也可以在安装包的dist 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-xlsx.js

HTML 导出 JS库

该 JS 文件主要是在导出 HTML 格式文件的时候使用。可以参考 导出报表 文档。

可通过npm install 安装ar-js-pdf.js 文件,也可以在安装包的dist 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-html.js

报表 Viewer JS 库

该js文件主要功能是用于报表展示 ActiveReportsJS 报表 Viewer 概览

可通过npm install 安装ar-js-pdf.js 文件,也可以在安装包的dist 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-viewer.js

Angular 报表 Viewer 文件

该js文件主要功能是用于与 Angular框架集成的Viewer 库文件 Angular 报表 Viewer

在 Angular 应用中,可以在package.json 文件中添加 @grapecity/activereports-angular项,并通过 NPM 安装,具体使用可参考文档 ActiveReportsJS 与 Angular集成

React 报表 Viewer 文件

该文件主要功能是用于与 React 框架集成的Viewer 库文件。可查看与 ActiveReportsJS 与 React 集成

React 应用中引用 ActiveReportsJS Viewer 可通过在package.json 文件中,添加 @grapecity/activereports-react 声明后,使用NPM 安装到项目中。具体操作文档参考 快速入门

Vue 报表 Viewer 文件

该文件主要功能是用于与 Vue 框架集成的Viewer 库文件。ActiveReportsJS 与 Vue 集成 。 Vue 应用中引用 ActiveReportsJS Viewer 可通过在package.json 文件中添加 @grapecity/activereports-vue 。声明后,使用NPM 安装到项目中。具体操作文档参考 快速入门

报表设计器(Report Designer)

该模块主要包含了Web报表设计器需要的相关文件 报表设计器

可通过npm 安装@grapecity/activereports 文件,也可以在安装包的dist 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/ar-js-designer.js

报表 Viewer 本地化资源文件

ActiveReportsJS 已经内置了三种语言的报表展示工具,可参考文档 报表 Viewer 来了解如何设置英文,中文或日语的界面。 可通过npm 安装@grapecity/activereports-localization 文件,也可以在安装包的dist\locales 文件夹下找到该文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/locales/ar-js-locales.js

报表设计器本地化资源文件

可为 Web 设计器设置本地化界面,如英文,中文,日文等,可参考文档 报表设计器 了解如何设置

可通过npm 安装@grapecity/activereports-localization 文件,也可以在安装包的dist\locales\designer 文件夹下找到ja-locale.jszh-locale.js文件,也可以直接引用 CDN 地址: https://cdn.grapecity.com/activereportsjs/2.0.0/dist/locales/designer/ja-locale.js https://cdn.grapecity.com/activereportsjs/2.0.0/dist/locales/designer/zh-locale.js

报表 Viewer UI 主题文件

ActiveReportsJS 为 [Report Viewer]提供了多个主题(../DeveloperGuide/ActiveReportsJSViewer/Overview)。详情可参考文档 Report Viewer 主题 。 可通过npm 安装@grapecity/activereports 文件,也可以在安装包的styles 文件夹下找到ar-js-ui.css, ar-js-viewer.css, dark-yellow-ui.css, dark-yellow-viewer.css, green-ui.css, green-viewer.css, light-blue-ui.css, 及 ```light-blue-viewer.css``````文件,也可以直接引用 CDN 地址:

  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-viewer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/dark-yellow-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/dark-yellow-viewer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/green-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/green-viewer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/light-blue-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/light-blue-viewer.css

报表设计器 UI 主题文件

ActiveReportsJS 为设计器内置了多个主题文件。可点击文档参考报表设计器主题

可通过npm 安装@grapecity/activereports 文件,也可以在安装包的styles 文件夹下找到ar-js-ui.css, ar-js-designer.css, dark-yellow-ui.css, dark-yellow-designer.css, green-ui.css, green-designer.css, light-blue-ui.css, 及 light-blue-designer.css文件,也可以直接引用 CDN 地址:

  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/ar-js-designer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/dark-yellow-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/dark-yellow-designer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/green-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/green-designer.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/light-blue-ui.css
  • https://cdn.grapecity.com/activereportsjs/2.0.0/styles/light-blue-designer.css