如何增强 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 的设计器支持动态数据过滤、交互式排序、钻取及深化、动态数据列等功能，为实现智能化的业务分析，提供更具价值的解决方案。nWord 文档类报表使用 ActiveReportsJS 可创建各类 Word 文档类报表，如质检报告、物料清单（BOM）等，实现图文与表格混排、项目编号、报表封皮/尾页、多页不同布局等类型的报表样式。l一流的框架集成及扩展ActiveReportsJS 遵循 TypeScript 规范，可与当下最流行的前端开发框架，如 Angular、React、Vue 等完美集成。
页:
[1]