如何增强 Ant Design of Vue 框架的报表能力-2

收藏

如何增强 Ant Design of Vue 框架的报表能力-1

1. 为该框架安装 ActiveReportsJS 相关资源

npm install @grapecity/activereports-vue @grapecity/activereports

或

yarn add @grapecity/activereports-vue @grapecity/activereports

2. 添加成功后，在Viewes文件夹中添加 ReportDemo的页面

</div>

</template>

import { Viewer } from '@grapecity/activereports-vue'

import '@grapecity/activereports/pdfexport'

import '@grapecity/activereports/htmlexport'

import '@grapecity/activereports/xlsxexport'

import '@grapecity/activereports-localization'

import '@grapecity/activereports/styles/ar-js-viewer.css'

import '@grapecity/activereports/styles/ar-js-ui.css'

import '@grapecity/activereports'

export default {

name: 'ReportDemo',

components: {

ReportViewer: Viewer

},

data () { },

created () { },

computed: {},

methods: {

loadData: async function () { },

loadReport: async function () { }

},

mounted: async function () { }

}

</script>

3. 修改router.config.js

{

path: '/Report/ReportDemo',

name: 'ReportDemo',

component: () => import('@/views/Report/ReportDemo'),

meta: { title: 'ReportDemo', icon: 'table', keepAlive: false, permission: ['table'] }

}

为什么选择 ActiveReportsJS 来增强Ant Design Vue 的报表能力

l 简单易用的Web报表设计器

集编辑、预览、导出为一体的跨平台报表设计器，类 Office 设计体验，内置矩表，图表，条码等十余种控件满足各类报表布局，让最终用户亦可自助设计中国式复杂报表

l 强大的报表设计能力，满足多场景报表设计需求

n 中国式复杂报表

借助 ActiveReportsJS 独有的矩表组件、表格组件和图表组件，可快速创建类 Excel 透视表、多维数据透视表、自由的单元格合并报表、动态行列头报表。

n 动态、交互式报表

ActiveReportsJS 的设计器支持动态数据过滤、交互式排序、钻取及深化、动态数据列等功能，为实现智能化的业务分析，提供更具价值的解决方案。

n Word 文档类报表

使用 ActiveReportsJS 可创建各类 Word 文档类报表，如质检报告、物料清单（BOM）等，实现图文与表格混排、项目编号、报表封皮/尾页、多页不同布局等类型的报表样式。

l 一流的框架集成及扩展

ActiveReportsJS 遵循 TypeScript 规范，可与当下最流行的前端开发框架，如 Angular、React、Vue 等完美集成。

		自动登录	找回密码
密码			立即注册

如何增强 Ant Design of Vue 框架的报表能力-2

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄