AR16集成到vue项目中，web designer渲染错误

前端的包一开始使用15.1.3版本，由于碰到一些控件不能点击的问题，客服反馈说是版本问题，我们就升级到了16.0.2。目前使用该版本创建web-designer，第一次可以正常渲染，但是关闭页签再进入或者刷新页签，designer都不会重新渲染，dom元素为空。只有刷新页面，才会重新渲染。报错如下，说是id已经存在。



创建逻辑与demo一致

1. <template>
   
2.   <div v-loading="viewLoading" class="app-container account-container">
   
3.     <div class="toolbar-container">
   
4.       <AccToolBar
   
5.         class="acc-bar"
   
6.         ref="toolbar"
   
7.         direction="left"
   
8.         :default-show-buttons="['Back','OnlySave','Preview','Import','Export']"
   
9.         @backEvent="backEvent()"
   
10.         @onlySaveEvent="saveEvent()"
    
11.         @previewEvent="previewEvent()"
    
12.         @importEvent="importEvent()"
    
13.         @exportExcelEvent="exportEvent()"
    
14.       />
    
15.     </div>
    
16.     <div class="scroll-box-container">
    
17.       <div class="report-designer">
    
18.         <div ref="designer" id="designer-id" style="width: 100%; height: 100%;" />
    
19.       </div>
    
20.     </div>
    
21.   </div>
    
22. </template>

复制代码

1.   initWebDesinger() {
   
2.       this.viewLoading = true
   
3.       const designerOptions = ActiveReports.WebDesigner.createDesignerOptions()
   
4.       console.log('templateObject', this.templateObject)
   
5.       designerOptions.server.url = process.env.BASE_ARC_API
   
6.       designerOptions.reportItemsFeatures.table.autoFillFooter = true
   
7.       designerOptions.fileView.visible = false // 将文件工具栏按钮进行隐藏
   
8.       designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html'
   
9.       designerOptions.documentation.reportItemsTransformation =
   
10.         'https://www.grapecity.com/activereports/docs/v14/online-webdesigner/supportedcontrols.html'
    
11.       console.log('designerOptions：', designerOptions)
    
12.       designerOptions.dataTab.dataSets.canModify = false
    
13.       designerOptions.dataTab.dataSources.canModify = false
    
14.       designerOptions.dataTab.dataSources.visible = false // 隐藏数据源面板
    
15.       // this.$refs.designer.id = this.designerKey()
    
16.       designerOptions.language = 'zh'
    
17.       designerOptions.restoreUnsavedReport = false // 去除未保存报表恢复功能
    
18.       console.log(designerOptions)
    
19.       this.viewLoading = true
    
20.       ActiveReports.WebDesigner.renderApplication(this.$refs.designer.id, designerOptions).then(res => {
    
21.         // 异步方法，调用结束后再执行
    
22.         if (this.templateObject.have_file) {
    
23.           this.openReportEvent()
    
24.         } else {
    
25.           this.createReportEvent()
    
26.         }
    
27.       }).catch(() => {
    
28.         this.viewLoading = false
    
29.       })
    
30.     },

复制代码

后来我使用动态id的方式解决了该问题，关闭重进或者刷新页签都能重新渲染
designerKey() {
      return 'designer-' + new Date().getTime()
  }


然后在昨天突然创建就不行了，报错信息如下

您好，webdesigner集成vue目前还没有对应的demo，我们研究一下看是否能实现。

Bella.Yuan 发表于 2022-3-25 14:52
您好，webdesigner集成vue目前还没有对应的demo，我们研究一下看是否能实现。

  "@grapecity/ar-designer": "^16.0.2",
   "@grapecity/ar-viewer": "^16.0.2",

好像是有viewer集成vue的demo实例来着？目前designer我们碰到的主要是这个id已存在的问题

码农一枚 发表于 2022-3-25 15:06
"@grapecity/ar-designer": "^16.0.2",
   "@grapecity/ar-viewer": "^16.0.2",

对的，有jsviewer集成vue的demo，参考链接：
https://github.com/activereports ... ain/JsViewerSamples

Bella.Yuan 发表于 2022-3-25 15:12
对的，有jsviewer集成vue的demo，参考链接：
https://github.com/activereports/WebSamples16/tree/main ...

因为我们在旧版本15.1.3并不会遇到 id already exists的问题，所以会有这样的疑惑，如果你们知道原因请告诉我谢谢。
此外，还有一个问题，我看ar16的api文档，language属性支持zh-TW。但我使用后，界面并没有变成繁体字，是否不支持？

码农一枚 发表于 2022-3-25 15:25
因为我们在旧版本15.1.3并不会遇到 id already exists的问题，所以会有这样的疑惑，如果你们知道原因请告 ...

您好，您是否是安装下面的步骤进行的升级，使用vs的工具，升级到AR16，然后更新对应的js文件。js文件下载地址：注意将后面的15.2.6修改为您自己的版本后在进行下载。
https://registry.npmjs.org/@grapecity/ar-viewer/-/ar-viewer-15.2.6.tgz
https://registry.npmjs.org/@grapecity/ar-designer/-/ar-designer-15.2.0.tgz
   

Bella.Yuan 发表于 2022-3-25 17:28
您好，您是否是安装下面的步骤进行的升级，使用vs的工具，升级到AR16，然后更新对应的js文件。js文件下载 ...

是的哦，你这个是viewer，我主要说的是designer有问题

码农一枚 发表于 2022-3-25 17:37
是的哦，你这个是viewer，我主要说的是designer有问题

您好，designer的链接上面已回复，先将对应的js文件都更新至16版本

Bella.Yuan 发表于 2022-3-25 18:06
您好，designer的链接上面已回复，先将对应的js文件都更新至16版本

你好，后端与前端的版本已经统一为16.0.2，再打开套版时id已经存在的问题还是会出现@。请问没有遇到类似的案例吗

码农一枚 发表于 2022-3-25 18:16
你好，后端与前端的版本已经统一为16.0.2，再打开套版时id已经存在的问题还是会出现@。请问没有遇到类似 ...

您好，该问题目前暂未有客户遇到，我还咨询了一下开发，开发回复，您可以参考一下下面的这个链接：
https://www.grapecity.com/active ... -to-vue-app-wd.html