AR16集成到vue项目中，web designer渲染错误
本帖最后由 码农一枚 于 2022-3-25 09:50 编辑前端的包一开始使用15.1.3版本，由于碰到一些控件不能点击的问题，客服反馈说是版本问题，我们就升级到了16.0.2。目前使用该版本创建web-designer，第一次可以正常渲染，但是关闭页签再进入或者刷新页签，designer都不会重新渲染，dom元素为空。只有刷新页面，才会重新渲染。报错如下，说是id已经存在。
创建逻辑与demo一致
<template>
<div v-loading="viewLoading" class="app-container account-container">
<div class="toolbar-container">
<AccToolBar
class="acc-bar"
ref="toolbar"
direction="left"
:default-show-buttons="['Back','OnlySave','Preview','Import','Export']"
@backEvent="backEvent()"
@onlySaveEvent="saveEvent()"
@previewEvent="previewEvent()"
@importEvent="importEvent()"
@exportExcelEvent="exportEvent()"
/>
</div>
<div class="scroll-box-container">
<div class="report-designer">
<div ref="designer" id="designer-id" style="width: 100%; height: 100%;" />
</div>
</div>
</div>
</template>
initWebDesinger() {
this.viewLoading = true
const designerOptions = ActiveReports.WebDesigner.createDesignerOptions()
console.log('templateObject', this.templateObject)
designerOptions.server.url = process.env.BASE_ARC_API
designerOptions.reportItemsFeatures.table.autoFillFooter = true
designerOptions.fileView.visible = false // 将文件工具栏按钮进行隐藏
designerOptions.documentation.home = 'https://www.grapecity.com/activereports/docs/v15/online-webdesigner/overview.html'
designerOptions.documentation.reportItemsTransformation =
'https://www.grapecity.com/activereports/docs/v14/online-webdesigner/supportedcontrols.html'
console.log('designerOptions：', designerOptions)
designerOptions.dataTab.dataSets.canModify = false
designerOptions.dataTab.dataSources.canModify = false
designerOptions.dataTab.dataSources.visible = false // 隐藏数据源面板
// this.$refs.designer.id = this.designerKey()
designerOptions.language = 'zh'
designerOptions.restoreUnsavedReport = false // 去除未保存报表恢复功能
console.log(designerOptions)
this.viewLoading = true
ActiveReports.WebDesigner.renderApplication(this.$refs.designer.id, designerOptions).then(res => {
// 异步方法，调用结束后再执行
if (this.templateObject.have_file) {
this.openReportEvent()
} else {
this.createReportEvent()
}
}).catch(() => {
this.viewLoading = false
})
},
后来我使用动态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/WebSamples16/tree/main/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。但我使用后，界面并没有变成繁体字，是否不支持？ 本帖最后由 Bella.Yuan 于 2022-3-25 18:12 编辑
码农一枚 发表于 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已经存在的问题还是会出现@。请问没有遇到类似的案例吗 本帖最后由 Bella.Yuan 于 2022-3-29 08:54 编辑
码农一枚 发表于 2022-3-25 18:16
你好，后端与前端的版本已经统一为16.0.2，再打开套版时id已经存在的问题还是会出现@。请问没有遇到类似 ...
您好，该问题目前暂未有客户遇到，我还咨询了一下开发，开发回复，您可以参考一下下面的这个链接：
https://www.grapecity.com/active ... -to-vue-app-wd.html