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