红色的石头 发表于 2023-9-24 16:34:15

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


<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 发表于 2023-9-24 16:34:16

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

也就是ARJS的产品:

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

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

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

wengMQ 发表于 2023-9-24 19:01:44

可以加我QQ546962925

Felix.Li 发表于 2023-9-25 10:13:07

问题描述:

集成Demo代码示例:

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

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

红色的石头 发表于 2023-9-25 15:10:39

感谢回复,这是我从网上搜索到的在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>
页: [1]
查看完整版本: Vue中集成AR,demo示例代码不完整