Vue中集成AR，demo示例代码不完整

Felix.Li

<template>
<div id="viewerContainer">
</div>
</template>
<script>
export default {
      props: ['reportName'],
      mounted() {
         this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewerContainer'
         });
      },
      watch: {
         reportName() {
            this.viewer.openReport(this.reportName);
         }
      },
}
</script>

<style>
#viewerContainer {
height: 100vh;
float:center;
width: calc(100% - 200pt);
}

如上：示例代码中的内容，请问this.reportName是什么值，如何获取？有完整的集成代码吗？谢谢

Felix.Li · Felix.Li

抱歉，您找的这个Demo应该是有问题的，这个项目引入的包是我们另一个产品的包。

也就是ARJS的产品:

所以这个是没办法初始化ActiveReport这个产品的。那个产品是一个纯前端的。所以不存在serviceUrl
所以这个项目肯定是有问题的。而如果您想初始化vue的项目，其实很简单，我们有AR专门用的包:
"@grapecity/ar-designer",
"@grapecity/ar-viewer",

这两个包才是给AR用的，里面有对应的js和css。
然后如何初始化呢，您这边跑一个我们的Demo项目。git上面随便跑一个服务端的项目即可:
然后您的vue项目做如下初始化:

这样就可以初始化一个了
vue代码如下：

wengMQ · wengMQ

可以加我QQ546962925

Felix.Li · Felix.Li

问题描述:

集成Demo代码示例:

问题解答，您好关于您的问题，可以参考这里:
https://github.com/activereports/WebSamples17
这是我们全部的示例代码
vue的可以参考这里：https://github.com/activereports ... s/JSViewer_Vue_Core

然后看您的截图，应该就是初始化正常加载报表，里面的reportName就是报表名称。这里的报表名称会传给后端，然后后端会根据名称去返回您配置的报表，所以这个reportName不是固定的，所以就用变量代替的

红色的石头 · 红色的石头

感谢回复，这是我从网上搜索到的在vue集成AR的例子，请问有和下面这个例子相似的官方文档和demo吗？在下面的例子中，我可以设置报表所在的URL地址、要展示的报表路径、报表参数等，但是上面的官方demo中，并没有可以设置参数的地方！
<template>
<div>
<ar-viewer :serviceUrl="serviceUrl" :reportPath="reportPath" :parameters="parameters" :culture="culture"></ar-viewer>
</div>
</template>
<script>
import { ArViewer } from "@grapecity/activereports-vue";
export default {
name: "MyComponent",
components: {
ArViewer
},
data() {
return {
serviceUrl: "http://myserver/myapp",
reportPath: "reports/myreport.rdlx",
parameters: [
{ name: "param1", value: "Hello" },
{ name: "param2", value: "World" }
],
culture: "en-US"
};
}
};
</script>

		自动登录	找回密码
密码			立即注册

[已处理] Vue中集成AR，demo示例代码不完整

最佳答案

4 个回复

本帖子中包含更多资源

Wyn高级认证

Wyn认证

悬赏达人

圣诞拼拼乐

微信认证勋章