Vue篇
Vue作为前端开发框架三剑客之一，我自己对Vue产生兴趣最大的原因，一是工作的需要，需要了解前端框架，二是Vue框架的创始人尤雨溪是一个中国人，这让我对Vue有了强大的兴趣。了解完尤雨溪本人，再看在前端领域Vue的影响力和受众群体，只能说大神请收下我的膝盖。除此之外Vue的资料文档汉化做的非常好，非常容易上手。Vue自 2014 年发布以来，成为很多开发者必备的工具。特别是Vue3.0于 2023 年 9 月正式发布后。新版本更小、更快、API更丰富，圈粉无数。
小、更快、API更丰富，圈粉无数。
从18年开始vue在前端的主流框架 React、Angular、Vue中的流行度逐年上升
在顶级网站都是使用哪种框架时，我们发现在排名前 100 万的网站中，Vue 位居第二，所占的比例比 Angular 还要多。同时，与 React 相比，Vue 虽然不及它的使用率，但是也占有相当大的份额。
在最近的调查中“在未来的项目中想要继续使用或学习什么框架”的回复中 Vue占比1/3
调查的受访者对于“在未来的项目中想要继续使用或学习什么框架”的回复中，Vue排名第二
Vue现在这么火，并且现在越来越多的人开始来学习和使用Vue框架来做项目。提到项目报表就是一个怎么都绕不过去的砍，任何一个项目或多或少的都有报表的需求，只是报表数量多少的、报表复杂程度的不同而已。
那么如何能够快速设计报表，并且能够跟很容易的跟Vue集成的一款报表工具来解决这个问题了，在这里就不得不提到今天话题的重点“前端报表控件”—ActiveReportsJS
报表篇
ActiveReportsJS是一款基于Hml5是一款基于 HTML5 的纯前端在线报表控件，通过拖拽式跨平台报表设计器和纯前端报表设计器，可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据钻取、精准套打等类型报表，并且能够直接跟Vue集成。
ActiveReportsJS的报表设计能力
类Excel报表
类Word报表
数据过滤和钻取联动
报表套打/二维码
集成篇
ActiveReportsJS可以跟Vue直接集成
使用 Vue CLI创建项目
vue create arjs-vue-viewer-app
安装 ActivereportsJS npm 包
可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。 在项目的根目录下执行以下命令：
npm install @grapecity/activereports-vue @grapecity/activereports
使用 yarn 命令：
yarn add @grapecity/activereports-vue @grapecity/activereports
如果是 Vue 2.0 安装 @vue/composition-api 包：
npm install @vue/composition-api
或执行 yarn 命令
yarn add @vue/composition-api
添加 ActiveReportsJS 报表
ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的public文件夹中，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。
{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Viewer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}
添加 Vue 报表 Viewer 控件
打开 srcApp.vue 文件，并修改代码如下：
import { Viewer } from "@grapecity/activereports-vue";
export default {
name: "App",
components: {
JSViewer: Viewer,
},
};
#viewer-host {
width: 100%;
height: 100vh;
}
集成后运行结果如下：