activereportsjs 报表展示组件预览标题栏加载错误

我把报表展示页面参考文档实现：https://demo.grapecity.com.cn/ac ... data-binding/purejs
我展示时，通过弹框展示打印预览页面。
要实现的页面为：


但是每次打开，组件的工具类显示总是出现问题。下面截图是我出现的问题。但是当我先打开报表设计页面，再打开预览页面就显示正常了（如上图），此时如果清空缓存重新打开预览页面，仍然会出现下图的问题







弹出框组件为

1. <template>
   
2.   <z-modal
   
3.     v-model="modelIsOpen"
   
4.     :title="title"
   
5.     width="1240"
   
6.     :mask-closable="false"
   
7.     :closable="false"
   
8.   >
   
9.     <div id="viewer-host">
   
10.       <Viewer ref="reportViewer"></Viewer>
    
11.     </div>
    
12.     <div slot="footer" class="ilead-modal-footer">
    
13.       <z-button @click="handleCancel">取消</z-button>
    
14.     </div>
    
15.   </z-modal>
    
16. </template>
    
17. 
    
18. <script>
    
19. import api from './api/index'
    
20. import { Viewer } from '@grapecity/activereports-vue'
    
21. import '@grapecity/activereports-localization/dist/ar-js-locales'
    
22. import '@grapecity/activereports-localization/dist/designer/zh-locale' // 中文包
    
23. import '@grapecity/activereports-localization'
    
24. 
    
25. 
    
26. export default {
    
27.   name: 'arjsView',
    
28.   components: {
    
29.     Viewer: Viewer,
    
30.   },
    
31.   data() {
    
32.     return {
    
33.       pkId: '', // 打印模板主键，调用组件时传值（可以传主键或编码）
    
34.       printTemplateCode: '', // 打印模板编码，调用组件时传值（可以传主键或编码）
    
35.       modelIsOpen: false,
    
36.       show: false,
    
37.       title: '',
    
38.       jsonDataArr: [],
    
39.       viewer: '',
    
40.       templateStr: '', // 模板字符串
    
41.     }
    
42.   },
    
43.   mounted() {
    
44.     let that = this
    
45.     that.viewer = that.$refs.reportViewer.Viewer('#root', { language: 'zh' })
    
46.     that.viewer.open('arjsDemo.rdlx-json')
    
47.     that.viewer.toggleSidebar(false)
    
48.   },
    
49.   methods: {
    
50.     // 加载 模板数据
    
51.     async getPrintTemplate() {
    
52.       let that = this
    
53.       let param = {
    
54.         pkId: that.pkId,
    
55.         printTemplateCode: that.printTemplateCode,
    
56.       }
    
57.       let res = await api.getPrintTemplate(param)
    
58.       if (res.data.code === '01') {
    
59.         that.templateStr = res.data.data
    
60.       } else {
    
61.         that.$Message.error(res.data.message)
    
62.       }
    
63.     },
    
64.     // 调用组件时，加载数据
    
65.     async openPrintTemplate() {
    
66.       let that = this
    
67. 
    
68.       // 校验是否传入了要打印的数据
    
69.       if (!!!that.jsonDataArr || that.jsonDataArr.length < 1) {
    
70.         that.$Message.warning('请选择要打印的数据')
    
71.         return
    
72.       }
    
73. 
    
74.       // 获取打印模板
    
75.       await that.getPrintTemplate()
    
76. 
    
77.       // 将打印模板数据转换为 JSON 格式
    
78.       let templateJson = JSON.parse(that.templateStr)
    
79. 
    
80.       // 将参数添加到模板中
    
81.       for (let i = 0; i < that.jsonDataArr.length; i++) {
    
82.         templateJson.DataSources[i].ConnectionProperties.ConnectString =
    
83.           'jsondata=' + JSON.stringify(that.jsonDataArr[i])
    
84.       }
    
85. 
    
86.       that.show = true
    
87.       // that.viewer = that.$refs.reportViewer.Viewer()
    
88.       that.viewer.open(templateJson)
    
89.       // that.viewer.open('arjsDemo.rdlx-json')
    
90. 
    
91.       // 预览页面，侧边按钮隐藏
    
92.       that.viewer.toggleSidebar(false)
    
93.     },
    
94.     // 取消功能
    
95.     handleCancel() {
    
96.       this.modelIsOpen = false
    
97.     },
    
98.   },
    
99. }
    
100. </script>
     
101. 
     
102. <style>
     
103. #viewer-host {
     
104.   width: 100%;
     
105.   height: 100%;
     
106. }
     
107. </style>
     

复制代码

组件调用方式为：

1. printBtn() {
   
2.       let selectRecords = this.$refs.xTable.getCheckboxRecords()
   
3.       if (!!!selectRecords || selectRecords.length < 1) {
   
4.         this.$Message.warning('请选择要打印的数据')
   
5.         return
   
6.       }
   
7.       this.$refs.arjsView.modelIsOpen = true
   
8.       this.$refs.arjsView.title = '条码打印预览'
   
9.       this.$refs.arjsView.printTemplateCode = 'stock-barcode-print'
   
10.       let jsonDataArr = []
    
11.       jsonDataArr.push(selectRecords)
    
12.       this.$refs.arjsView.jsonDataArr = jsonDataArr
    
13.       this.$refs.arjsView.openPrintTemplate()
    
14.       console.log('调用打印接口', selectRecords)
    
15.     },

复制代码

加油加油 发表于 2022-11-4 17:52
您说的无预览直接打印的话， 参考这个文档去做的话，怎么进行参数传递呢？

https://help.grapecity.co ...

load的话需要这样传递参数

加油加油 发表于 2022-11-4 17:52
您说的无预览直接打印的话， 参考这个文档去做的话，怎么进行参数传递呢？

https://help.grapecity.co ...

您好，参数这样传递，然后在调用一下viewer.print()方法就可以了。

参数传递参考：https://demo.grapecity.com.cn/ac ... ortParameter/purejs

Felix.Li 发表于 2022-11-4 17:33
然后关于that.$refs.reportViewer为空，我感觉这里应该是加载循序的问题，如果v-if把这里设false，那如下 ...

您说的无预览直接打印的话， 参考这个文档去做的话，怎么进行参数传递呢？

https://help.grapecity.com.cn/pa ... ion?pageId=58726695

是不是 report.load() 的参数直接用 我现在 open 的参数

Felix.Li 发表于 2022-11-4 17:25
关于帖子的问题，第一个具体问题应该是您预览的时候css样式错误，我看您的代码应该是没有引入css文件导致 ...

加完样式问题就解决了

加油加油 发表于 2022-11-4 17:01
另外，我想在  标签上添加 v-if ,这样我渲染页面的时候可以不渲染报表展示组件，只有当我点击按钮时查询预 ...

然后关于that.$refs.reportViewer为空，我感觉这里应该是加载循序的问题，如果v-if把这里设false，那如下截图

这个标签其实就为空了，viewer标签不存在，那其实自然that.$refs.reportViewer就会为null。您可以参考一下我的见解

我在菜单中直接添加页面进行报表预览展示，也是出现工具栏错位的问题



页面代码为：附件

另外，我想在 <Viewer> 标签上添加 v-if ,这样我渲染页面的时候可以不渲染报表展示组件，只有当我点击按钮时查询预览时，再去渲染，此种做法会导致 that.$refs.reportViewer.Viewer() 执行时，that.$refs.reportViewer 为空

我理解是组件加载时机不正确导致的渲染问题，现在不清楚具体哪一块导致的。

因为在本地 demo 程序中无法复现此问题。如果有想法可以说出来，我进行尝试

加油加油 发表于 2022-11-4 16:56
我理解是组件加载时机不正确导致的渲染问题，现在不清楚具体哪一块导致的。

因为在本地 demo 程序中无法 ...

关于帖子的问题，第一个具体问题应该是您预览的时候css样式错误，我看您的代码应该是没有引入css文件导致的，您可以在直接预览这块把相应的viewer的css文件先加载:


import '@grapecity/activereports/styles/ar-js-viewer.css'
import '@grapecity/activereports/styles/ar-js-ui.css'



然后我看您这里的需求是想调用预览打印的页面，那么在您代码执行的最后把viewer.print()调用就可以，这个是我们调用浏览器的打印去打印报表页面