请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › ActiveReports专区 › 求助中心 › 查看内容
发新帖

码农一枚

注册会员

1

主题

12

帖子

57

积分

注册会员

积分
57
最新发帖

[已处理] AR16集成到vue项目中，web designer渲染错误

码农一枚
注册会员   /  发表于：2022-3-25 09:47  /   查看：6948  /  回复：25
1金币
本帖最后由 码农一枚 于 2022-3-25 09:50 编辑

前端的包一开始使用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()
  }


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


附件: 您需要 登录 才可以下载或查看，没有帐号？立即注册

25 个回复

倒序浏览
Bella.YuanWyn认证
超级版主   /  发表于：2022-3-25 14:52:13
沙发
您好，webdesigner集成vue目前还没有对应的demo，我们研究一下看是否能实现。
回复 使用道具 举报
码农一枚
注册会员   /  发表于：2022-3-25 15:06:40
板凳
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已存在的问题
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于：2022-3-25 15:12:18
地板
码农一枚 发表于 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
回复 使用道具 举报
码农一枚
注册会员   /  发表于：2022-3-25 15:25:47
5#
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.YuanWyn认证
超级版主   /  发表于：2022-3-25 17:28:44
6#
本帖最后由 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
   



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
回复 使用道具 举报
码农一枚
注册会员   /  发表于：2022-3-25 17:37:33
7#
Bella.Yuan 发表于 2022-3-25 17:28
您好，您是否是安装下面的步骤进行的升级，使用vs的工具，升级到AR16，然后更新对应的js文件。js文件下载 ...

是的哦，你这个是viewer，我主要说的是designer有问题
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于：2022-3-25 18:06:14
8#
码农一枚 发表于 2022-3-25 17:37
是的哦，你这个是viewer，我主要说的是designer有问题

您好，designer的链接上面已回复，先将对应的js文件都更新至16版本
回复 使用道具 举报
码农一枚
注册会员   /  发表于：2022-3-25 18:16:48
9#
Bella.Yuan 发表于 2022-3-25 18:06
您好，designer的链接上面已回复，先将对应的js文件都更新至16版本

你好，后端与前端的版本已经统一为16.0.2，再打开套版时id已经存在的问题还是会出现@。请问没有遇到类似的案例吗
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于：2022-3-25 18:22:22
10#
本帖最后由 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
回复 使用道具 举报
下一页 »
123下一页
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2025 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部