如何增强 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的页面

<template>

  <div id="report" style="height: 100vh">

    <ReportViewer ref="reportViewer" :report="{ Uri: '/MarketSnapshot.rdlx-json' }" />

  </div>

</template>

<script>

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 等完美集成。