如何与Vue.js集成实现最终用户编辑器
Posted LanLan_Guo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何与Vue.js集成实现最终用户编辑器相关的知识,希望对你有一定的参考价值。
创建 Vue应用
创建 Vue 应用的最简单的方法是使用Vue CLI
vue create -p default arjs-vue-designer-app
安装 ActiveReportsJS 相关文件
Web 报表设计器功能是放在@grapecity/activereports-vue NPM 包中,@grapecity/activereports npm 包中存放核心功能。在使用 ActiveReportsJS 时,可以执行以下命令来安装在应用根目录下:
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 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 Designer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}
添加设计器宿主元素
打开 src\\App.vue 文件,添加代码如下,单文件组件 调用 Vue 报表设计器来加载上一步骤创建的报表模板
<template>
<div id="designer-host">
<JSDesigner v-bind:report="{id: \'report.rdlx-json\', displayName: \'my report\' }"></JSDesigner>
</div>
</template>
<script>
import { Designer } from "@grapecity/activereports-vue";
export default {
name: "App",
components: {
JSDesigner: Designer,
},
};
</script>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-designer.css" ></style>
<style>
#designer-host {
width: 100%;
height: 100vh;
}
</style>
以上代码是初始化报表设计器示例,需要注意的是宿主元素ID 一定要可用。
运行项目
使用npm run serve或 yarn serve 命令运行应用。 ActiveReportsJS 设计器控件就会出现在页面中,可以做一些基本的控件添加,修改,数据绑定等操作来测试设计器的功能。
以上是关于如何与Vue.js集成实现最终用户编辑器的主要内容,如果未能解决你的问题,请参考以下文章
vue.js 和 Laravel - 我们如何将 vue js 与 laravel 集成?