ActiveReportsJS 与 Vue 集成

本节我们主要介绍了如何在Vue 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

必备文件

• Node.js
• Yarn
• Vue-CLI - 使用命令行安装VUE 需要的全局工具
  

   npm install -g @vue/cli

      或

   yarn global add -g @vue/cli

使用以下步骤创建Vue 应用程序.

1. 在命令控制台中输入以下命令来新建的 VUEW 应用程序
   

   vue create arjs-vue -d

2. 将此目录设为工作目录
   

   cd arjs-vue

3. 安装ActiveReportsJS包
   

   npm install @grapecity/activereports-vue

            或

   yarn add @grapecity/activereports-vue

4. 将设计好的报表文件放置在'public' 文件夹下面

5. 在 'src/App.vue' 中输入以下模块源代码 :

   <template>
      <div id="app" style="height: 600px">
      <GcArViewer ref="control" v-bind:zoom="reportZoom"
			viewMode="paginated"
			v-bind:availableExports = "['pdf', 'xlsx']"
			v-on:report-loaded="this.onReportLoaded"
			v-on:document-loaded="onDocumentLoaded"
			:report="{ Uri: 'InvoiceList.rdlx-json' }"/>
      </div>
   </template>

   <script>
   import Vue from 'vue';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import { Viewer} from '@grapecity/activereports-vue';
   import '@grapecity/activereports';

   export default Vue.extend ({
   name: 'app',
         components: {
            GcArViewer: Viewer
        },
	   	data: function () {
			return {
				reportZoom: 'FitPage',
			}
		},
        mounted(){
			var htmlBtnIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24"><path class="gc-icon-color--text" d="M19 26v2c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h10v6c0 1.1.9 2 2 2h5v2H6c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h13zM13 3v6c0 .6.5 1 1 1h5l-6-7zM6 14c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h23c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2H6zm23 8v1h-5v-7h1v6h4zm-15-5v6h1v-6h2v-1h-5v1h2zm-4 2v-3h1v7h-1v-3H7v3H6v-7h1v3h3zm10.5 0L19 16h-1v7h1v-5l1 2h1l1-2v5h1v-7h-1l-1.5 3z" fill-rule="evenodd" clip-rule="evenodd" /></svg>';
			this.getViewer().toolbar().addItem({
				key: '$html-export-btn',
				icon: { type:'svg', content:htmlBtnIcon },
				title: "HTML Export",
				enabled: true,
				action: () => { this.getViewer().export('html', []).then((result) => result.download("Exported_HTML")) }				
			});
         
           },
         methods: {
		   onDocumentLoaded: function (a) { console.log("document loaded", a);
	   	},
	   	onReportLoaded: function (arg) { console.log    ("report loaded", arg);
		   },
           getViewer() {
           return this.$refs.control;
           }
           }
       });
   </script>

6. 在命令控制台中，输入以下命令以运行该应用程序
   

   npm run serve

            或

   yarn serve

如果您运行过程中报"Unexpected console statement (no-console)" 类似的错误，请关掉 no-console 规则，通过配置package.json 如下，并重启应用：

   "rules": {"no-console": "off"},

运行成功后，可在浏览器查看报表展示 (localhost:8080)。 您将在浏览器中查看应用程序运行结果; 按照应用程序输出中的说明操作。