[]
ActiveReportsJS 的安装包是由跨平台设计器应用程序和相关的JavaScript库组成的,我们将逐一描述每个文件的作用
ActiveReportsJS 提供了三个平台的桌面设计器,Windows,macOS 及Linux 。
桌面端报表设计器应用程序是由Electron 编译并生成的,您可以使用桌面设计器来设计报表模板。
可通过与安装普通软件的方式来安装桌面设计器。您可以免费试用30天,试用版功能与正式版功能是完全一致的。
这些 JavaScript 库包含核心功能,并提供了灵活的API。
如果您计划使用模块管理器引用ActiveReportsJS,如 webpack,并且在开放API说明,您可以API文档在中查看。您可以在 package.json
文件中使用 @grapecity/activereports 从NPM 导入相关的依赖文件。
纯JS 应用程序可包含 ar-js-core.js
脚本 ,可以在dist
文件中拷贝,或者直接从CDN 引用:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js
该 JS 文件主要是在导出PDF 文件的时候使用。可以参考 导出报表 文档。
可通过npm install 安装ar-js-pdf.js
文件,也可以在安装包的dist
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-pdf.js
该 JS 文件主要是在导出 XLSX 格式文件的时候使用。可以参考 导出报表 文档。
可通过npm install 安装ar-js-pdf.js
文件,也可以在安装包的dist
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-xlsx.js
该库包含的代码可以将报表导出为表格数据(CSV)格式。如果您计划在使用Webpack在您的应用程序中引用ActiveReportsJS,可以通过npms install 安装@grapecity/activereports。也可以直接引用ar-js-tabular-data.js 文件,该文件是在npm包中的dist 文件夹,也可以直接引用CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-tabular-data.js
该 JS 文件主要是在导出 HTML 格式文件的时候使用。可以参考 导出报表 文档。
可通过npm install 安装ar-js-pdf.js
文件,也可以在安装包的dist
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-html.js
该js文件主要功能是用于报表展示 ActiveReportsJS 报表 Viewer 概览
可通过npm install 安装 @grapecity/activereports来安装 ar-js-viewer.js
文件,也可以在安装包的dist
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-viewer.js
该文件主要包含了Web报表设计器需要的相关文件 报表设计器。
可通过npm 安装@grapecity/activereports 文件,也可以在安装包的dist
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-designer.js
Angular NPM 包主要包含了Angular 报表 Viewer 和Angular 报表设计器 资源文件。
在Angular 应用中通过安装 @grapecity/activereports-angular NPM 包可以将其添加到项目中。
具体可参考 Angular 报表 Viewer 和在Anuglar框架中集成报表设计器。
React NPM 包主要包含了与 React 框架集成的Viewer 库文件及 React 报表设计器。
React 应用中通过安装安装 @grapecity/activereports-react NPM 包可以将其添加到项目中。
具体可参考 React框架与报表 Viewer集成 和 在React框架中集成报表设计器。
Vue NPM 包主要包含了与 Vue框架集成的Viewer 库文件和Vue 报表设计器
Vue 应用中可通过安装 @grapecity/activereports-vue 。使用 NPM 安装到项目中。具体操作文档参考 快速入门。
ActiveReportsJS 已经内置了三种语言的报表展示工具,可参考文档 报表 Viewer 来了解如何设置英文,中文或日语的界面。
可通过npm 安装@grapecity/activereports-localization 文件,也可以在安装包的dist\locales
文件夹下找到该文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/ar-js-locales.js
可为 Web 设计器设置本地化界面,如英文,中文,日文等,可参考文档 报表设计器 了解如何设置
可通过npm 安装@grapecity/activereports-localization 文件,也可以在安装包的dist\locales\designer
文件夹下找到ja-locale.js
及 zh-locale.js
文件,也可以直接引用 CDN 地址:
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/designer/ja-locale.js
https://cdn.grapecity.com/activereportsjs/3.0.0/dist/locales/designer/zh-locale.js
ActiveReportsJS 为 报表 Viewer提供了多个主题。详情可参考文档 报表 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/3.0.0/styles/ar-js-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-viewer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-viewer.css
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/3.0.0/styles/ar-js-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/dark-yellow-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/green-designer.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-ui.css
https://cdn.grapecity.com/activereportsjs/3.0.0/styles/light-blue-designer.css