ActiveReportsJS 是一款基于 JavaScript 和 HTML5 的輕量級Web報表工具，采用拖拽式設(shè)計模式，不需任何服務(wù)器和組件支持，即可在 Mac、Linux 和 Windows 操作系統(tǒng)中，設(shè)計多種類型的報表。ActiveReportsJS 同時提供跨平臺報表設(shè)計、純前端報表展示、多數(shù)據(jù)源綁定、前端打印導(dǎo)出等功能，靈活豐富的 API 可為您帶來無與倫比的報表開發(fā)體驗。

ActiveReportsJS 作為 .NET報表控件 ActiveReports 在 Web 平臺的擴(kuò)展，不但繼承了其強(qiáng)大的報表設(shè)計能力和高效的報表開發(fā)引擎，還提供了全新的跨平臺報表設(shè)計器和純前端報表查看器，全面支持 Node.js、Angular、React、Vue 等前端開發(fā)框架。本文介紹了如何在項目中使用 ActiveReportsJS。

點(diǎn)擊下載ActiveReportsJS正式版

在應(yīng)用程序中添加 ActiveReportsJS 需要的css和腳本文件：

1、必須文件：

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

2、如果使用導(dǎo)出功能，需要引用以下文件：

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

引用本地的 ActiveReportsJS 文件

下載 ActiveReportsJS 包，并將文件復(fù)制到應(yīng)用程序中的文件夾。

ActiveReportsJS...

ActiveReportsJS 可以通過以下地址下載：

免費(fèi)下載

從 CDN 引用 ActiveReportsJS 文件

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

ActiveReportsJS...

使用 npm 引用 ActiveReportsJS

ActiveReportsJS 在 npm 中在@grapecity npm 域內(nèi)使用 activereports.* 包來表示，@grapecity/activereports 代表了庫包。與其他 npm包一樣，您需要

可以通過執(zhí)行以下命令從 npm 中安裝最新版本 ActiveReportsJS ：

npm install @grapecity/activereports

@grapecity/activereports 包結(jié)構(gòu)

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

• 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 語句導(dǎo)入 ActiveReportsJS 模塊：

• 導(dǎo)入包中的所有功能：

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

• 導(dǎo)入指定模塊：

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

相關(guān)內(nèi)容推薦：

輕量級Web報表工具ActiveReportsJS入門教程：如何使用設(shè)計器創(chuàng)建報表

純前端報表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用