Power BI 嵌入到 VueJS答案

【问题标题】：PowerBI Embeded into VueJSPower BI 嵌入到 VueJS
【发布时间】：2021-09-20 03:20:56
【问题描述】：

我正在将 Power BI 报告嵌入到我的 VueJS 应用程序中，但容器只是返回空白。我看到了这个警告：

DevTools 无法加载源地图：无法解析内容 https://app.powerbi.com/13.0.16322.55/scripts/ai.0.js.map: 出乎意料令牌

凭据都正确返回，并且控制台中没有错误。

    <template>
  <div class="hello">
    <iframe id="powerBIcontainer" width="100%" height="1000px" />
  </div>
</template>

<script>
import * as pbi from "powerbi-client";
export default {
  name: "testanalytics",
  data: function() {
    return {
      test: null
    };
  },
  methods: {
      getAccessCredentials(workspaceID, reportID) {
        this.axios
            .get(`/analytics/${workspaceID}/${reportID}`)
            .then((res) => {
                this.powerBI(res.data.data);
            })
            .catch(err => {
                this.$eventBus.$emit("error", err.data.message);
            });
      },
      powerBI(data) {
        var permissions = pbi.models.Permissions.All;
        var config = {
            type: "report",
            tokenType: pbi.models.TokenType.Embed,
            accessToken: data.accessToken,
            embedUrl: data.reportConfig[0].embedUrl,
            id: data.reportConfig[0].reportId,
            permissions: permissions,
                settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
                }
        };

        let powerbi = new pbi.service.Service(
            pbi.factories.hpmFactory,
            pbi.factories.wpmpFactory,
            pbi.factories.routerFactory
        );
        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)  });
      }
  },
  mounted() {
      this.getAccessCredentials("*******","*******")
  }
};
</script>

【问题讨论】：

标签： vue.js powerbi

【解决方案1】：

发布后大约十分钟后解决了这个问题。问题是响应以 IFRAME 的形式返回，我试图将其放在 IFRAME 中。这是我的解决方案：

<template>
    <b-container class="content" fluid>
        <b-row class="content">
            <b-col class="content" id="powerBIcontainer"></b-col>
        </b-row>
    </b-container>
</template>

<script>
import * as pbi from "powerbi-client";
export default {
  name: "testanalytics",
  data: function() {
    return {
      test: null
    };
  },
  methods: {
      getAccessCredentials(workspaceID, reportID) {
        this.axios
            .get(`/analytics/${workspaceID}/${reportID}`)
            .then((res) => {
                this.powerBI(res.data.data);
            })
            .catch(err => {
                this.$eventBus.$emit("error", err.data.message);
            });
      },
      powerBI(data) {
        var permissions = pbi.models.Permissions.All;
        var config = {
            type: "report",
            tokenType: pbi.models.TokenType.Embed,
            accessToken: data.accessToken,
            embedUrl: data.reportConfig[0].embedUrl,
            id: data.reportConfig[0].reportId,
            permissions: permissions,
                settings: {
                    filterPaneEnabled: true,
                    navContentPaneEnabled: true
                }
        };

        let powerbi = new pbi.service.Service(
            pbi.factories.hpmFactory,
            pbi.factories.wpmpFactory,
            pbi.factories.routerFactory
        );
        var reportContainer = document.getElementById("powerBIcontainer");
        var report = powerbi.embed(reportContainer, config);
        console.log("report", report)
        report.off("loaded");
        report.off("rendered");
        report.on("error", function() {
            this.report.off("error");
        });
      }
  },
  mounted() {
      this.getAccessCredentials("*******","********")
  }
};
</script>

【讨论】：