与 Nuxt.js 框架集成报表Viewer

本章节主要提供ActiveReportsJS报表查看器组件的详细概述，介绍在 Nuxt.js 应用中如何展示ActiveReportsJS 报表。

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

创建 Nuxt.js 应用程序

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

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

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

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

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

Project name: arjs-nuxtjs-viewer-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

安装 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

配置 Nuxt.js

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

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

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

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

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

<template>
  <div id="viewer-host" >
    <Viewer v-bind:report="{ Uri: 'report.rdlx-json' }" />
  </div>
</template>

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

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

运行和测试应用程序

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