V1
V1

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
  1. 将此目录设为工作目录
   cd arjs-vue
  1. 安装ActiveReportsJS包
   npm install @grapecity/activereports-vue

            或

   yarn add @grapecity/activereports-vue
  1. 将设计好的报表文件放置在'public' 文件夹下面

  2. 在 '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>
  1. 在命令控制台中,输入以下命令以运行该应用程序
   npm run serve

            或

   yarn serve

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

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

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