powerBi如何嵌入vue项目

最近做项目时，有一个需求就是将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) })
      })
    }
  }