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是什么值,如何获取? 有完整的集成代码吗?谢谢
抱歉,您找的这个Demo应该是有问题的,这个项目引入的包是我们另一个产品的包。
也就是ARJS的产品:
所以这个是没办法初始化ActiveReport这个产品的。那个产品是一个纯前端的。所以不存在serviceUrl
所以这个项目肯定是有问题的。而如果您想初始化vue的项目,其实很简单,我们有AR专门用的包:
"@grapecity/ar-designer",
"@grapecity/ar-viewer",
这两个包才是给AR用的,里面有对应的js和css。
然后如何初始化呢,您这边跑一个我们的Demo项目。git上面随便跑一个服务端的项目即可:
然后您的vue项目做如下初始化:
这样就可以初始化一个了
vue代码如下:
可以加我QQ546962925 问题描述:
集成Demo代码示例:
问题解答,您好关于您的问题,可以参考这里:
https://github.com/activereports/WebSamples17
这是我们全部的示例代码
vue的可以参考这里:https://github.com/activereports/WebSamples17/tree/main/JsViewerSamples/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>
页:
[1]