vue.js下怎么做报表设计

Z时代
2024-01-10
分类：IT

图片描述

vue.js" title="vue.js">vue.js下如何做报表设计，类似于上图这种，显示的内容自己可以拖动选择在哪个地方显示，要显示哪些数据可以自己决定，在java下是怎么实现自己设计报表的？

回答：

看图，您是期望在Vue项目中，能够集成 Web的可视化报表设计器，并在设计器中支持拖拽操作，来设计报表，并且要有保存报表，打开报表的逻辑，预览报表的逻辑。
如果自己开发的话，工作量太大，且开发的大部分工作可能都会投入到设计器的开发，如果您是个人开发，估计没有6个月是不行的。
还是考虑用现有的可以与 Vue框架集成的前端报表工具，包含报表设计，保存，打开，预览等功能，推荐几个工具： ActiveReportsJS 收费，可免费试用三十天，在 Vue 框架中集成纯前端报表设计器

Vue中的操作步骤参考：
创建 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>