最近做项目时,有一个需求就是将powerbi内嵌到页面中,后端会返回所需要的属性。在一直反复看帖,想办法解决嵌入问题,试了官网和github都不行,废话不多说直接上代码,和大家分享一下我的解决方法。
因为需求是要riado单选,显示对应的内嵌页面,所以就必须使用v-if,如果用v-show,会引入对应的dom元素已经存在内嵌页面,不能再成功导入,这点蛮重要的,所以使用iframeUrl进行判断,在请求链接时,将链接清空,这样就能保证每次点击另外的单选框时,用v-if特性把当前dom元素删除,不会干扰下一次页面的嵌入。如果没有这个需求,自己酌情修改就行。
<el-row v-if="iframeUrl" id="powerBIcontainer" width="100%" height="1000px" />
这里需要npm对应的依赖,下面是npm的链接
https://www.npmjs.com/package/powerbi-client
npm i powerbi-client
然后引入对应的项目
import * as pbi from 'powerbi-client'
这里由于领导出差,暂时只给我两个报表的数据,只能这样将就着用一下,大家自己参考,如果有像我一样需求,需要使用v-if或多次加载内嵌页面时,一定记得使用
this.$nextTick(() => {
var reportContainer = document.getElementById('powerBIcontainer')
var report = powerbi.embed(reportContainer, config)
report.off('loaded')
report.off('rendered')
report.on('error', function() {
this.report.off('error')
})
report.reload().catch(error => { console.log(error) })
})
不然会获取不到对应的dom元素,导致不能正确嵌入。
changeRadio(e) {
var reportItem = {}
this.reportList2.forEach(item => {
if (item.reportName === this.selectedReport) { reportItem = item }
})
this.iframeUrl = ''
// this.getIUrl(reportItem)
if (this.count > 0) {
this.getAccessCredentials('5b805361-0480-4b11-bab6-240111a27d29', 'b548ed87-923c- 429f-a1a3-faacbf4d5d97')
} else {
this.count++
// this.getAccessCredentials('5b805361-0480-4b11-bab6-240111a27d29', 'b548ed87-923c-429f-a1a3-faacbf4d5d97')
this.getAccessCredentials('fcf75139-fbd5-459b-9a1c-6adb8a8b7736', '0f8d8724-f1b9-454e-9e78-f196a7549902')
}
},
async getAccessCredentials(workspaceID, reportID) {
const { data, code, message } = await getUrl({
'reportId': reportID,
'workspaceId': workspaceID
})
if (code === 200) {
this.iframeUrl = data.embedUrl
this.$forceUpdate()
this.powerBI(data)
} else {
this.$eventBus.$emit('error', message)
}
},
powerBI(data) {
var permissions = pbi.models.Permissions.All
var accessToken = data.embedToken.token
var embedUrl = data.embedUrl
var embedReportId = data.id
var config = {
type: 'report',
tokenType: pbi.models.TokenType.Embed,
accessToken: accessToken,
embedUrl: embedUrl,
id: embedReportId,
permissions: permissions,
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
}
const powerbi = new pbi.service.Service(
pbi.factories.hpmFactory,
pbi.factories.wpmpFactory,
pbi.factories.routerFactory
)
this.$nextTick(() => {
var reportContainer = document.getElementById('powerBIcontainer')
var report = powerbi.embed(reportContainer, config)
report.off('loaded')
report.off('rendered')
report.on('error', function() {
this.report.off('error')
})
report.reload().catch(error => { console.log(error) })
})
}
}