Question

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

我正在尝试将示例报告嵌入到放置在HellowWorld的iframe中，该iframe是用vue-cli创建的一个空的新VueJS项目的vue组件。我被困在这一点：下一个错误： “ TypeError：无法读取null的属性'powerBiEmbed'”

public class DIContainer : IContainer
    {
        private readonly Dictionary<Type, Func<object>> _registeredTypes = new Dictionary<Type, Func<object>>();

        public object GetInstance(Type type)
        {
            if (_registeredTypes.ContainsKey(type))
            {
                return _registeredTypes[type]();
            }
            else
            {
                return null;
            }
        }

        private object CreateInstance(Type type)
        {
            var constructor = type.GetConstructors()
                .OrderByDescending(c => c.GetParameters().Length)
                .First();

            var args = constructor.GetParameters().Select(p => GetInstance(p.ParameterType)).Where(a => a != null).ToArray();

            return Activator.CreateInstance(type, args);
        }

        public T Get<T>()
        {
            return (T)GetInstance(typeof(T));
        }

        public void Register<I, C>()
        {
            Register(typeof(I), typeof(C));
        }

        public void RegisterSinglenton<I, C>()
            where C : I
        {
            var instance = CreateInstance(typeof(C));
            RegisterSinglenton<I>((C)instance);
        }

        public void RegisterSinglenton<T>(T obj)
        {
            _registeredTypes.Add(typeof(T), () => obj);
        }

        public void Register(Type service, Type implementation)
        {
            _registeredTypes.Add(service, () => CreateInstance(implementation));
        }
    }

我在做什么错了？

Answer 1

尝试此代码。

<div id="container" style="width:100%;
height:800px;"></div>


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: pbi.models.Permissions.All,
  settings: {
    filterPaneEnabled: false,
    navContentPaneEnabled: true
  }
};

// Get a reference to the embedded report HTML element
var embedContainer = document.getElementById('container');

// Embed the report and display it within the div container.
console.log(pbi);
var report = powerbi.embed(embedContainer, config);

// Report.off removes a given event handler if it exists.
report.off("loaded");

// Report.on will add an event handler which prints to Log window.
report.on("loaded", function () {
  console.log("Loaded");
});

// Report.off removes a given event handler if it exists.
report.off("rendered");

// Report.on will add an event handler which prints to Log window.
report.on("rendered", function () {
  console.log("Rendered");
});

report.on("error", function (event) {
  console.log(event.detail);

  report.off("error");
});

report.off("saved");
report.on("saved", function (event) {
  Log.log(event.detail);
  if (event.detail.saveAs) {
    console.log('In order to interact with the new report, create a new token and load the new report');
  }
});

Answer 2

我找到了解决方案，我刚刚将我原始文章的代码移到了Mounted（）生命周期方法中，现在可以正常工作了。问题在于，在创建div包含报表之前，PBI代码正在执行，因此PBI正在接收不存在的对象。将代码移到mount（）似乎可以解决问题。谢谢您的帮助。

Power BI嵌入+ VueJS错误：“ TypeError：无法读取null的属性'powerBiEmbed'

2 个答案: