geg-gas-web/src/views/activereport/viewer/components/Viewer.vue

<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>