ActiveReportJS Nuxt.js 报表设计器

本章主要展示了如何在 Nuxt.js 框架中集成ActiveReportsJS纯前端报表设计器。

在 Nuxt.js 框架中集成纯前端报表设计器

Nuxt.js是一个基于 Vue 的框架，它为您的应用程序提供定义明确的结构以及使开发过程和最终应用程序更快的优化。在本教程中，我们构建了一个 Nuxt.js 应用程序，它使用 Report Designer 组件来加载一个简单的报告。

1、创建 Nuxt.js 应用程序

创建 Nuxt.js 应用程序的最简单方法是使用创建 Nuxt 应用程序工具。从命令提示符或终端运行以下命令以创建 Nuxt.js 项目。

# with npm v6.1+
npm init nuxt-app arjs-nuxtjs-designer-app

# with npx(included by default with npm v5.2+)
npx create-nuxt-app arjs-nuxtjs-designer-app

# with yarn
yarn create nuxt-app arjs-nuxtjs-designer-app

它会问你几个问题，这里是可以使用的答案

Project name: arjs-nuxtjs-designer-app
 Programming language: TypeScript
 Package manager: Yarn
 UI framework: None
 Nuxt.js modules: None
 Linting tools: None
 Testing framework: None
 Rendering mode: Single Page App
 Deployment target: Server (Node.js hosting)
 Development tools: None
 Version control system: None

2、安装 NPM 包

我们通过NPM 包分发Vue 报表设计器组件@grapecity/activereports-vue，该包依赖于@grapecity/activereports包含核心功能的包。此外，在 Vue v2.x 中使用 ActiveReportsJS 需要@vue/composition-api和@nuxtjs/composition-api包。

要安装这些包的当前版本，请从应用程序的根文件夹运行以下命令。

# with npm
npm i @grapecity/activereports-vue@latest @vue/composition-api @nuxtjs/composition-api

# with yarn
yarn add @grapecity/activereports-vue@latest @vue/composition-api @nuxtjs/composition-api

3、配置 Nuxt.js

打开nuxt.config.js位于应用程序根文件夹中的文件，并将“@nuxtjs/composition-api/module”字符串添加到数组中buildModules，如下所示

buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    '@nuxtjs/composition-api/module'
  ],

4、将 ActiveReportsJS 报告添加到应用程序中

ActiveReportsJS 使用JSON格式和rdlx-json报告模板文件的扩展名。在应用程序的static文件夹中，创建一个名为的新文件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"
      }
    ]
  }
}

5、将 Vue Report Designer 组件添加到应用程序

打开pages\index.vue文件并将默认内容替换为以下代码。它集成了 Vue 报表设计器并加载您在上一步中添加的报表模板。它还导入默认的Report Designer Component Styles并为设计器的宿主元素定义样式。

<template>
  <div id="designer-host">
    <Designer v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }" />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import {Designer} from '@grapecity/activereports-vue';

export default Vue.extend({
  name: "DesignerPage",
  components: {
    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 scoped>
#designer-host {
  height: 100vh;
  width: 100%;
}
</style>

6、运行和测试应用程序

您可以使用yarn dev命令运行该应用程序。默认情况下，项目运行于http://localhost:3000/. 如果您浏览此 URL，ActiveReportsJS Report Designer页面上将显示。设计器将显示显示文本的报表Hello, ActiveReportsJS Designer。您可以使用报表设计器用户界面测试基本功能。