纯前端报表控件 ActiveReportsJS入门教程：如何在项目中使用 ActiveReportsJS

ActiveReportsJS是一款基于 JavaScript 和 HTML5 的轻量级Web报表工具。本文描述了如何在项目中使用 ActiveReportsJS的内容。

ActiveReportsJS 是一款基于 JavaScript 和 HTML5 的轻量级Web报表工具，采用拖拽式设计模式，不需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 操作系统中，设计多种类型的报表。ActiveReportsJS 同时提供跨平台报表设计、纯前端报表展示、多数据源绑定、前端打印导出等功能，灵活丰富的 API 可为您带来无与伦比的报表开发体验。

ActiveReportsJS 作为 .NET报表控件 ActiveReports 在 Web 平台的扩展，不但继承了其强大的报表设计能力和高效的报表开发引擎，还提供了全新的跨平台报表设计器和纯前端报表查看器，全面支持 Node.js、Angular、React、Vue 等前端开发框架。本文介绍了如何在项目中使用 ActiveReportsJS。

ActiveReportsJS正式版

在应用程序中添加 ActiveReportsJS 需要的css和脚本文件：

1、必须文件：

• ar-js-viewer.css
• ar-js-core.js
• ar-js-viewer.js

2、如果使用导出功能，需要引用以下文件：

• ar-js-pdf.js
• ar-js-xlsx.js
• ar-js-html.js

引用本地的 ActiveReportsJS 文件

下载 ActiveReportsJS 包，并将文件复制到应用程序中的文件夹。

ActiveReportsJS...

ActiveReportsJS 可以通过以下地址下载：

免费下载

从 CDN 引用 ActiveReportsJS 文件

ActiveReportsJS 所有的文件都可以从 CDN 上下载，都是存放到 cdn.grapecity.com 中

ActiveReportsJS...

使用 npm 引用 ActiveReportsJS

ActiveReportsJS 在 npm 中在@grapecity npm 域内使用 activereports.* 包来表示，@grapecity/activereports 代表了库包。与其他 npm包一样，您需要下载安装 NodeJS

可以通过执行以下命令从 npm 中安装最新版本 ActiveReportsJS ：

npm install @grapecity/activereports

@grapecity/activereports 包结构

grapecity / activereports 包含了所有可用的功能模块：

1、readme.md

2、license.md

3、package.json

4、index.js

5、index.d.ts

6、dist

• ar-js-core.js
• ar-js-html.js
• ar-js-pdf.js
• ar-js-viewer.js
• ar-js-xlsx.js
• ie-polyfills.full.js

7、styles

• ar-js-viewer.css
• dark-yellow.css
• green.css
• light-blue.css

8、lib

• node_modules > @grapecity

r-js-html.d.ts
/span>ar-js-html.js
/span>ar-js-pagereport.d.ts
/span>ar-js-pagereport.js
/span>ar-js-pdf.d.ts
/span>ar-js-pdf.js
/span>ar-js-viewer.d.ts
/span>ar-js-viewer.js
/span>ar-js-xlsx.d.ts
/span>ar-js-xlsx.js
/span>en-locale.json
/span>ie-polyfills.full.js

• ar-js-core.d.ts
• ar-js-html.d.ts
• ar-js-pdf.d.ts
• ar-js-viewer.d.ts
• ar-js-xlsx.d.ts

9、core

• index.js
• index.d.ts

10、viewer

• index.d.ts
• index.js

11、pdfexport

• index.d.ts
• index.js

12、xlsxexport

• index.d.ts
• index.js

13、htmlexport

• index.d.ts
• index.js

使用 @grapecity/activereports 包

使用 import 语句导入 ActiveReportsJS 模块：

• 导入包中的所有功能：

  import * as arjs from '@grapecity/activereports';  // or...  import { Viewer, Core, PdfExport} from '@grapecity/activereports';

• 导入指定模块：

  import * as Core from '@grapecity/activereports/core';  import { Viewer } from '@grapecity/activereports/viewer';

本文内容到这里就结束了，感兴趣的朋友可以继续关注我们网站哦~您也可以下载ActiveReportsJS免费体验~

相关内容推荐：

轻量级Web报表工具ActiveReportsJS入门教程：如何使用设计器创建报表

纯前端报表控件 ActiveReportsJS入门教程：如何将ActiveReportsJS的强大功能嵌入到Web应用

想要购买ActiveReportsJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都