ARJS is supported in IE 11 and above, but it needs to be referenced (Polyfills files) otherwise it will not be displayed in IE. Let me talk about how to configure the integration of ARJS2.0 in Vue so that it can be displayed in IE

Create a Vue application. Use the Vue CLI to create a project Vue create arjs-vue-view-app

Install the ActivereportsJS NPM package. You can install the Activereports vUE files by installing the @grapecity/ Activereports-vue NPM package. The @grapecity/ Activereports package provides the core functionality. Execute the following command in the root directory of the project:

npm install @grapecity/activereports-vue @grapecity/activereports
Copy the code

Run the yarn command:

yarn add @grapecity/activereports-vue @grapecity/activereports
Copy the code

Install @vue/composition-api for Vue 2.0: NPM install @vue/composition-api

Or run the yarn add @vue/composition-api command

NPM install “babel-polyfill”

NPM install “polyfill-library-node”

Add the Vue report Viewer control open the SRC \ app. Vue file and modify the code as follows:

<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>Copy the code