彩票走势图

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

转帖|使用教程|编辑:莫成敏|2020-01-22 09:49:51.097|阅读 1154 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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包一样,您需要

可以通过执行以下命令从 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
♢ar-js-html.d.ts
ar-js-html.js
ar-js-pagereport.d.ts
ar-js-pagereport.js
ar-js-pdf.d.ts
ar-js-pdf.js
ar-js-viewer.d.ts
ar-js-viewer.js
ar-js-xlsx.d.ts
ar-js-xlsx.js
en-locale.json
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正版授权,或了解更多产品信息请点击




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP