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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。