---初始化后台管理web页面项目

src/views/activereport/viewer/components/Viewer.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="viewer-host">
+    <ReportViewer ref="viewRef" language="zh" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { Viewer as ReportViewer } from '@grapecity/activereports-vue';
+  import '@grapecity/activereports/styles/ar-js-ui.css';
+  import '@grapecity/activereports/styles/ar-js-viewer.css';
+  import '@grapecity/activereports/pdfexport';
+  import '@grapecity/activereports/htmlexport';
+  import '@grapecity/activereports/xlsxexport';
+
+  import '@grapecity/activereports-localization/dist/designer/zh-locale';
+
+  import { onMounted, ref } from 'vue';
+
+  const viewRef = ref();
+  let props = defineProps({
+    content: String,
+  });
+  onMounted(() => {
+    if (props.content) {
+      let reportObj = JSON.parse(props.content);
+      viewRef.value.Viewer().open(reportObj.definition);
+    }
+  });
+</script>
+<style>
+  #viewer-host {
+    position: fixed;
+    inset: 0;
+  }
+</style>

src/views/activereport/viewer/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <Viewer />
+  </div>
+</template>
+<script lang="ts" setup>
+  import Viewer from './components/Viewer.vue';
+</script>