ARJS支持在IE 11及以上版本展示,但是需要引用(Polyfills js文件 )不然就无法在IE浏览器中展示。
下面我就来说说在Vue中集成ARJS2.0应该进行怎样的配置,才可以在IE浏览器中展示

创建 Vue 应用
使用 Vue CLI创建项目
vue create arjs-vue-viewer-app

安装 ActivereportsJS npm 包
可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。 在项目的根目录下执行以下命令:

npm install @grapecity/activereports-vue @grapecity/activereports

使用 yarn 命令:

yarn add @grapecity/activereports-vue @grapecity/activereports

如果是 Vue 2.0 安装 @vue/composition-api 包:
npm install @vue/composition-api

或执行 yarn 命令
yarn add @vue/composition-api

安装 "babel-polyfill"
npm install "babel-polyfill"

安装 "polyfill-library-node"
npm install   "polyfill-library-node"

添加 Vue 报表 Viewer 控件
打开 src\App.vue 文件,并修改代码如下:

<template>
  <div id="viewer-host">
    <JSViewer :report="{ Uri: reportTemplate }"></JSViewer>
  </div>
</template>

<script>
import "polyfill-library-node";
  import { Viewer } from "@grapecity/activereports-vue";
  import "@grapecity/activereports/styles/ar-js-ui.css";
  import "@grapecity/activereports/styles/ar-js-viewer.css";

  export default {
    name: "App",
    components: {
      JSViewer: Viewer,
    },
    data: function () {
      return {
        reportTemplate: {
          Type: "report",
          Body: {
            Name: "Body",
            Type: "section",
            ReportItems: [
              {
                Type: "textbox",
                Name: "textbox1",
                Style: { FontSize: "18pt" },
                Value: "Hello, ActiveReportsJS Viewer",
                Height: "10in",
              },
            ],
          },
          Name: "Report",
        },
      };
    },
  };
</script>

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

LanLan_Guo
14 声望4 粉丝

研究报表已经7年有余,略懂一二。期望能够成为报表专家,为大家能够提供报表咨询服务。