javascript - Power BI 嵌入 + VueJS 错误 : "TypeError: Cannot read property ' powerBiEmbed' of null"

标签 javascript vue.js powerbi

我正在为我想要的一个项目进行一些基于 VueJS + Power BI 集成的测试,但我无法运行官方页面 ( https://microsoft.github.io/PowerBI-JavaScript/demo/v2-demo/ ) 的基本示例。

我正在尝试将示例报告嵌入到一个 iframe 中,该 iframe 放置在使用 vue-cli 创建的空的新 VueJS 项目的 HellowWorld、vue 组件中。我被困在这一点上:出现下一个错误: “类型错误:无法读取 null 属性‘powerBiEmbed’”

<template>
  <div class="hello">
    <iframe id="container" width="1800" height="750"></iframe>
  </div>
</template>

<script>

import * as pbi from 'powerbi-client';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  created () {


    var permissions = pbi.models.Permissions.All

    var config = {
          type: 'report',
          tokenType:  pbi.models.TokenType.Embed,
          accessToken: 'H4sIAAAAAAAEACWWtQ7sCBZE_-WlXslMK03QZmbOzMxu02j_fXs0eSW3VFX3_P3HSp9hTos___0DQIfa7ln3aQzt9GkQlP0JN1bceBKKwI_lw5KTxiwpIT5MdwV3nMBtD8sgsosZHW29kg2q4rbC9DzNtLiwwqhfXEB8JGoBEDo_zjHRoUXflcEcShthKCB53ongwZMEB3xMD4vBXnJY4owTZQunECmIXeJvJH3MWp8bjQdOmGmAyq7RPQ3oUOrMp7B0zNxCEdyoDMZZyZjjrAWmoZnqWGxJvFyYQ9MyhVugvJea8C23zFonkDdJFYgeeD2UhyrMUlS02IK_iA7qlhrTds4fy9YOgYDnjnFf3-8bFwlKGRA9rmWwkUUpNzjqkg1XvXtpS6C8bumIvkZcfazcAjFwfF8NFXi6YQNogrCmXPnmsvgX7ncR4Oa2s0Jhij7p_CxPX7srwyFdsZvg8ZK3QR_a2XET22Fg3YqbwRBaD7avNEnxqqLKGm6Uat5aqf0M5fsX_67drCdgooX8F0Ic1ZGacy1J6MXC0dVwIEvwSEfTQKTgoovQ5JWIcOhYlrHgp-VXbxsTfDku3KxYO63mnqOs27usis65C3neVlyHGymXZjmDRUsc2Qc96VCb-DKLCBXDz56UxcZ8eUOT4jSgsju8GJHq_alm7TGvR9HxfaAUhWTLPlvGezl6Ndt5PnG5eU-7gaciReDCrs2mTzUfK4e8rsLyKKPYXFCN5iERp-oH1b1gF8DJjOWGPjBfut0uCuRR4bRPhiI1WPZqo7HzR-M8OBu9dWAsReRbuJcCB9q9jdrYXCOLdhSOFJUIJy0CuwF9x6ginLF5BJ99Z4XsvM4Jl5yEYE5nb2IdnN8y-1wFcFZsTCkflLAjixn2W8aWBljzrV48c0pTZgHRa8brqtAByHWKdp_yX5TKMqCSdY7YKCuxX3HIFnOkoFQeQX5Kmo73UPxQaHTD-7DRuahW5GFXyXdfeKbjzBbyuWU6yI-tOygFACF-r2-IrmwDQRV4jvetVWBGAJK0WqgnDq2qxg5QF89IF5sYOsaos6ybpYK7giOdFamOmDA2TDPSfYLudF7I3-0RvF95qDCWUmcadJIxu5Av7qVPZArLwms2x8jq6toBVB3-HFhbij20dMNQtxmYQFNm7MVnSxmnG8R6pO9l9Y4ePwVdimSPZw-OJ5IvK-Lb7twrnIGZmlWvHouenC7ntbzHuJUSGRzT6Yx5UDbzvT3hSB8FV65iTS4MutxnAUXMtF_j_LnU7zU7V8-cJBWtbnqpKPx8NMosaddmSvEg6kzO26WfMqVJhfN2cuDLZFVN8KbjXdJK8PFbWO5CeYDSEMcRaFvX2PENrcNewG2Q-oMIWrduZV71vaWJVHdYvoN9f7pRUhI_mzxA-yAZXjPsgg8VYVUqOMMOTH7IHQpUYyzQ2YuYLaZXpWV9wSdjMUdIWMg2nl4fPidWVJ7Ra3OF7ZiKBdFnY-8_RCp39fKKJSxG2nUjywKB44x9vzB652apObAFHkYTKiL5G6oMZ2qYI3mJUib1Sfub20mk-TpeNXYjg0E2tLGREpW0PryH4s61Z--FQSnNTSQMSDBurbIR7OsW5JvohxtpYmOzRTZ-bU66yi3rcnsGf4OlGoVRf6N2JOQphEVuauunb124Cw_0LyUNSK7fXh_sFmALNEceNZDbt-KVGK246Hs1JDDgQZqMI5y7cwn6owjvlLJPboW0w6oNK9ibnH8pcR2bnZEh4LPw1_fziGV5JEiGxjuF-56xhBDEeOYiUTswq1tIzTqjF-ZiS2WPrwzDw5CFXQRR8YEadnTexYAVzYkDT7epdLKR1OraWUkOz4KIXqF8ZLG_MvSHLPULxsyhjlJ-8OZLAibhatZeMD3O_6gWmFS57YoQFSOaKMtp6kQUmLBfzRegj-diMj8AQkk8OyDP4Y1DWtZ-_ec30fPcVNZXRvtvCYYDcwVN9tLJeGrfiuV_Q-kT-mWRw8VyWn5QWRHjqNpzyZNi-Xg9l9WlZhEW_Bl4I7kVSSpCcKkvjGeDRGjr4ALk6bn1asI0lPAhqog0OOTY1Tm2WACX6t0xIitPbgdoAGoRAwQMHQj9PS7KpgP7ALBI0fqzudwP9hr0d5GcAPXkbzeJhFVLHAkO91rkJ8bblJyHmgwjnEuFWSXaaJjew28LVFUL_A49ntHg_vznD7s9yzGr5fPDCfM5Kn56mBLl9WuBygF3kxZZNnR0qzVh5S2Ypnq35dhmxnkhVaTZj2y6d07cUIkLTcQkFm5ZX7fZUP_rQLBYs7CgqCbI4XcJ7nbPga5SvxdFJ9nwtL7QD-aRBjr8bHoq80EfbD6V4F86JJVxnPwidGBdc5DpEK8VJ8iZV4micvIUkINzXEnk17XkByTiqmQaR3177BlarPjA54foLkyURzLGhb3Mz7kT2vXOjboS2deon1QWzXmia_1-W2WHXSek7JRaeKObSjmWQYGtOVVr-TJqoPDuNho68zab3VjhTnwNdw436Y-9xvsPHwLG6M1qXWJ7_p2tib6uj23HG8wDlYV__fXXPzY_S1NucvBzmew-p_9mix48knIOqR8Eb_qvym3rKT2-W_mTDdccbs2MSyxCggAqFWGjLCnokiSq6ccv7R7sbhdLss4v30vtCR5el20KeO7AiucUtOe2cLYxCarloNntqLVGI4IVR5NY8GUOyVjIe8ktTwWPmVr7OgfFWzbB8DcWPmbCy1Jg8jsblsYkkoC52juqZv3ASzsHYYzBxzJjSG4TZP6DWgppNG6tWPmZbvp6f3rwi1hb5Sx2GJZ-AqHJHa1E9EMS7kHFStUkJHJi3QTz6Cnu9_5kAYYhhRw19xD6Y99EcBUhWQMcH226YYkJ_W-84rkO5Y33UhvnHclksCwRtkQ50j-yOGYpaOtFX5zsZeWmN1TOvcMfAvKo7c5ETvvYIR_1z-b__R9GklbbQgsAAA==',
          embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=f6bfd646-b718-44dc-a378-b73e6b528204&groupId=be8908da-da25-452e-b220-163f52476cdd&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLVVTLU5PUlRILUNFTlRSQUwtcmVkaXJlY3QuYW5hbHlzaXMud2luZG93cy5uZXQifQ%3d%3d',
          id: 'f6bfd646-b718-44dc-a378-b73e6b528204',
          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('container');
    var report = powerbi.embed(reportContainer, config);

    report.off("loaded");


    report.off("rendered");



    report.on("error", function () {
        this.report.off("error");
    });

  }
}
</script>

我做错了什么?

最佳答案

我找到了解决方案,我刚刚将原始帖子的代码移至 Mounted() 生命周期方法,现在工作正常。问题是 PBI 代码在创建包含报告的 div 之前执行,因此 PBI 接收到一个不存在的对象。将代码移至 Mounted() 似乎可以解决问题。感谢您的帮助。

关于javascript - Power BI 嵌入 + VueJS 错误 : "TypeError: Cannot read property ' powerBiEmbed' of null",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58379381/

相关文章:

vue.js - 如何在 vuex 存储中使用 JSON 数据(无 webpack)

javascript - 如何使用 Nightwatch.js 滚动到页面底部

string - POWERBI、DAX : concatenate strings, 拆分,并且仅保留子字符串一次

javascript - 如何使用 vue js 向 Flask 后端 api 发送请求?

javascript - 异步显示表单元素

javascript - 在脚本标签 vue2 中监听来自 js 代码的自定义事件

powerbi - Power BI写回sql源

PowerBI 增量刷新参数

javascript - 定义多个变量、数组或其他东西的正确方法?

javascript - "Delete"的键码触发浏览器的后退按钮 — jQuery