本实例详细讲解了如何在Vue中集成ActiveReportsJS Viewer
1、使用 Vue CLI创建项目
vue create vue-viewer
2、安装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
3、添加 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" } ] } }
4、添加 Vue 报表 Viewer 控件
打开 src\App.vue
文件,并修改代码如下:
<template> <div id="viewer-host"> <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer> </div> </template> <script> import { Viewer } from "@grapecity/activereports-vue"; export default { name: "App", components: { JSViewer: Viewer, }, }; </script> <style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style> <style src="../node_modules/@grapecity/activereports/styles/ar-js-viewer.css" ></style> <style> #viewer-host { width: 100%; height: 100vh; } </style>
5、运行与调试
使用 npm run serve
或 yarn serve
命令查看执行结果
6、运行结果
7、Demo实例下载