4.0VUE3 集成设计器加实现按钮求助帖

目前是这样 我直接把那个 https://demo.grapecity.com.cn/activereportsjs/demos/features/designer-report-preview/purejs 这里面这个预览报表的代码复制到app.vue里面 报这个错

您是您可以参考一下这个Demo:

https://gcdn.grapecity.com.cn/showtopic-176151-1-1.html

首先是怎么保存的保存到后端，您可以在onSave或者onSaveAs实现:

这个里面info.definition    就是报表文件。您把这个保存就可以了。
然后report.open不能放url
这个可以直接放一个id，会从public文件下找到，或者直接在这里放报表文件
也就是直接report.open(报表json)就可以打开

  这个复制过来了  能启动了  但是后台报这个  设计界面出不来

问题描述:

集成报错，无法正常集成

解决方法：
看您的报错，是引入vue报错。您是不是就没有正常的引入对应的vue，在package.json中引入
引入: "vue": "***"
然后推荐您参考一下这个帖子做一下集成:
https://gcdn.grapecity.com.cn/showtopic-133836-1-4.html
对应的ARJS在package.json中修改即可

那我VUE3的话 怎么操作 V3 好像不用引入这个的把

1. <template>
   
2.   <div id="designer-toolbar" class="container-fluid">
   
3.     <div class="row mt-3 mb-3">
   
4.       <button
   
5.           type="button"
   
6.           class="btn btn-primary btn-sm col-sm-2 ml-1"
   
7.           v-on:click="onPdfPreview()"
   
8.           :style="{display: designerHidden ? 'none' : 'block'}"
   
9.       >
   
10.         PDF 预览
    
11.       </button>
    
12. 
    
13.       <button
    
14.           type="button"
    
15.           class="btn btn-secondary btn-sm col-sm-2 ml-1"
    
16.           v-on:click="onDesignerOpen()"
    
17.           :style="{display: designerHidden ? 'block' : 'none'}"
    
18.       >
    
19.         打开设计器
    
20.       </button>
    
21.     </div>
    
22.   </div>
    
23.   <div id="host" style="height:100%;width:100%;margin:10px">
    
24.      <ReportDesigner ref='reportDesigner'></ReportDesigner>
    
25.   </div>
    
26. </template>
    
27. <script>
    
28. import {ref, onMounted, watch} from 'vue';
    
29. import {Designer as ReportDesigner} from '@grapecity/activereports-vue';
    
30. 
    
31. import "@grapecity/activereports-localization/dist/designer/zh-locale";
    
32. 
    
33. import "@grapecity/activereports/styles/ar-js-ui.css";
    
34. import "@grapecity/activereports/styles/ar-js-designer.css";
    
35. import {PdfExport} from "@grapecity/activereports";
    
36. 
    
37. 
    
38. export default {
    
39.   name: 'ActiveReportsDesigner',
    
40.   // props: {
    
41.   //   reportFile: {
    
42.   //     type: String,
    
43.   //     default: ''
    
44.   //   },
    
45.   //   reportOrientation: {
    
46.   //     type: String,
    
47.   //     default: "Landscape"
    
48.   //   }
    
49.   // },
    
50.   components: {ReportDesigner},
    
51. 
    
52.   setup(context) {
    
53. 
    
54.     let reportDesigner = ref();
    
55.     let resolveFunc = ref(null);
    
56.     let reportStorage = new Map();
    
57.     let counter = 0;
    
58.     let designerHidden = ref(false);
    
59.     const onPdfPreview = () => {
    
60.       // 在这里定义 onPdfPreview 方法的逻辑
    
61.       // 例如，在 PDF 预览按钮点击时执行的操作
    
62.       const reportInfo =  reportDesigner.getReport();
    
63.       console.log('PDF 预览按钮被点击');
    
64.       const report = new PageReport()
    
65.       report.load(reportInfo.definition);
    
66.       const doc =  report.run();
    
67.       const result = PdfExport(doc);
    
68.       result.download("exportedreport.pdf");
    
69. 
    
70.       // 可以在这里添加具体的逻辑
    
71.     };
    
72. 
    
73.     const onDesignerOpen = () => {
    
74.       // 在这里定义 onDesignerOpen 方法的逻辑
    
75.       // 例如，在打开设计器按钮点击时执行的操作
    
76.       this.designerHidden = false;
    
77.       console.log('打开设计器按钮被点击');
    
78.       // 可以在这里添加具体的逻辑
    
79.     };
    
80. 
    
81.     onMounted(() => {
    
82. 
    
83.       reportDesigner = new ReportDesigner("#host", {language: "zh"});
    
84. 
    
85.       reportDesigner.setActionHandlers({
    
86.         onRender: async (report)=>{
    
87.           this.designerHidden = true;
    
88.           this.$refs.reportViewer.Viewer().open(report.definition);
    
89.         },
    
90.         onCreate: () => {
    
91.           const reportId = `NewReport${counter + 1}`;
    
92.           counter++;
    
93.           return Promise.resolve({definition: templates.CPL, id: reportId, displayName: reportId});
    
94.         },
    
95.         onOpen: function () {
    
96.           const ret = new Promise((resolve) => {
    
97.             resolveFunc.value = resolve;
    
98. 
    
99.             return ret;
    
100.           })
     
101.         },
     
102.         onSave: (info) => {
     
103.           const reportId = info.id || `NewReport${counter + 1}`;
     
104.           this.reportStorage.set(reportId, info.definition);
     
105.           counter++;
     
106.           return Promise.resolve({displayName: reportId});
     
107.         },
     
108.         onSaveAs: (info) => {
     
109.           const reportId = `NewReport${counter + 1}`;
     
110.           this.reportStorage.set(reportId, info.definition);
     
111.           counter++;
     
112.           return Promise.resolve({id: reportId, displayName: reportId});
     
113.         }
     
114.       });
     
115.       reportDesigner.setReport({ id: "reports/company-template.rdlx-json" });
     
116.     })
     
117. 
     
118. 
     
119. 
     
120. 
     
121.     return {
     
122.       reportDesigner,
     
123.       reportStorage,
     
124.       resolveFunc,
     
125.       counter,
     
126.       onPdfPreview,
     
127.       onDesignerOpen,
     
128.       designerHidden,
     
129.     }
     
130.   },
     
131. }
     
132. </script>
     
133. <style>
     
134. #host, #viewer-host {
     
135.   width: 100%;
     
136.   height: 500px;
     
137. }
     
138. </style>

复制代码

现在目前的代码是这样  然后报

testSplit 发表于 2023-9-13 18:43
现在目前的代码是这样  然后报

问题描述：vite+vue集成按钮有问题

问题解答：

       应该是您的代码编写有问题导致的，附件是修改后的，您下载后对比看看。

我能不能发你附件呀  我的demo 有点问题

Bella.Yuan 发表于 2023-9-14 12:16
问题描述：vite+vue集成按钮有问题

问题解答：

我能不能发你附件呀  我的demo 有点问题

您可以使用如下操作:


上传好附件之后。

就可以上传附件，建议您将上传附件压缩为zip上传