Vue中集成ARJS如何在IE浏览器中展示
本帖最后由 KearneyKang 于 2021-2-4 20:10 编辑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>
页:
[1]