Vue中集成ARJS如何在IE浏览器中展示

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

使用 Vue CLI创建项目

1. vue create arjs-vue-viewer-app

复制代码

安装 ActivereportsJS npm 包

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

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

复制代码

使用 yarn 命令：

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

复制代码

如果是 Vue 2.0 安装 @vue/composition-api 包：

1. npm install @vue/composition-api

复制代码

或执行 yarn 命令

1. yarn add @vue/composition-api

复制代码

安装 "babel-polyfill"

1. npm install "babel-polyfill"

复制代码

安装 "polyfill-library-node"

1. npm install   "polyfill-library-node"

复制代码

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

1. <template>
   
2.   <div id="viewer-host">
   
3.     <JSViewer :report="{ Uri: reportTemplate }"></JSViewer>
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. import "polyfill-library-node";
   
9.   import { Viewer } from "@grapecity/activereports-vue";
   
10.   import "@grapecity/activereports/styles/ar-js-ui.css";
    
11.   import "@grapecity/activereports/styles/ar-js-viewer.css";
    
12. 
    
13.   export default {
    
14.     name: "App",
    
15.     components: {
    
16.       JSViewer: Viewer,
    
17.     },
    
18.     data: function () {
    
19.       return {
    
20.         reportTemplate: {
    
21.           Type: "report",
    
22.           Body: {
    
23.             Name: "Body",
    
24.             Type: "section",
    
25.             ReportItems: [
    
26.               {
    
27.                 Type: "textbox",
    
28.                 Name: "textbox1",
    
29.                 Style: { FontSize: "18pt" },
    
30.                 Value: "Hello, ActiveReportsJS Viewer",
    
31.                 Height: "10in",
    
32.               },
    
33.             ],
    
34.           },
    
35.           Name: "Report",
    
36.         },
    
37.       };
    
38.     },
    
39.   };
    
40. </script>
    
41. 
    
42. <style>
    
43.   #viewer-host {
    
44.     width: 100%;
    
45.     height: 100vh;
    
46.   }
    
47. </style>

复制代码