前端嵌入阿里云quick bi

 quick bi最重要的两个参数，“token”和“pageid”。

 token：管理员注册quick bi时就会生成，后续不管制作了几个图表界面，请求的token都是同一个，token可以让后端通过接口返回，前端直接请求阿里云接口获取token会跨域

pageid：这是很重要的一个值， 每个图表界面的pageid是不同，前端根据pageid去渲染不同的图标界面

<template>
<div class="quickHeight">
<iframe v-if="token && pageId"
class="quickbi-iframe-demo"
:src="`https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=${pageId}&accessToken=${token}`"
scrolling="no"
frameborder="0"
width="100%"
:height="heightData"></iframe>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getConfig } from "@/utils/oss";
export default {
name: "bulletin",
components: {},
data () {
return {
iframe: null,
token: null,
pageId: null,
heightData: 600,
};
},
computed: {
},
async activated () {
this.pageId = 'xxxxxxxxxxx'
// 请求接口获得pageid
this.getQuickbiToken();
},
mounted () {
// 在仪表板加载之前进行监听
window.addEventListener('message', this.messageListener);
// 嵌入Quick BI仪表板的Iframe
if (this.token) {
this.iframe = document.querySelector('iframe');
// 主动请求Quick BI仪表板高度
// message传入的data中必须包含{ getDashboardHeight: true }
this.iframe.contentWindow.postMessage({ getDashboardHeight: true }, '*');
}
},
beforeDestroy () {
window.removeEventListener('message', this.messageListener, false)
},
methods: {
// 请求quickbi token
async getQuickbiToken () {
let res = await this.$api.receiptNumPieChart();
if (res.success) {
this.token = res?.data?.accessToken?.accessToken
}
},
// 请求阿里云quickbi的高度设置当前iframe的高度
messageListener (event) {
const quickBIURL = ['https://bi.aliyuncs.com'];
if (quickBIURL.includes(event.origin)) {
// 使用postMessage传出的高度
this.heightData = event.data.height;
// 使用postMessage传出的仪表板页面ID
this.pageId = event.data.pageId;
}
}
}
};
</script>
<style lang="scss" scoped>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple {
background: #d3dce6;
height: 400px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
</style>

最后

以上就是乐观金毛为你收集整理的前端嵌入阿里云quick bi的全部内容，希望文章能够帮你解决前端嵌入阿里云quick bi所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。