[]
本章节主要提供ActiveReportsJS报表查看器组件的详细概述,介绍在 Nuxt.js 应用中如何展示ActiveReportsJS 报表。
Nuxt.js是一个基于 Vue 的框架,它为您的应用程序提供定义明确的结构以及使开发过程和最终应用程序更快的优化。在本教程中,我们构建了一个 Nuxt.js 应用程序,它使用 Report Viewer 组件来显示简单报告的输出。
创建 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 包分发 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.config.js位于应用程序根文件夹中的文件,并将“@nuxtjs/composition-api/module”字符串添加到数组中,buildModules如下所示
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
'@nuxtjs/composition-api/module'
],
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"
}
]
}
}
打开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。您可以使用报表查看器用户界面测试基本功能。