尝试在 Blazor 页面上嵌入 Power BI 报告失败

Question

我的 Blazor 服务器应用有一个显示嵌入式 Power BI 报告的页面。

实现相对简单：我在名为 reportContainer 的页面中有一个空的 div，并使用 PowerBI.js 提供的 powerbi.embed(reportContainer, config) 来嵌入报告。

而且效果很好。我可以看到我的报告呈现。

在某些情况下我还需要删除报告。如果用户愿意，可以将其嵌入回去。我删除嵌入式报告的方法只是通过 JS 互操作将容器 div 再次设置为空。嵌入回来只是使用与第一次渲染相同的代码。

这是相关代码。

在 Blazor 页面中：

private async Task RemoveReportAsync() {
    await JSRuntime.InvokeVoidAsync("removeReport");
}

private async Task ShowReportAsync() {
    ....
    await JSRuntime.InvokeVoidAsync("showReport");
}

在脚本中：

function showReport(...) {
    var config = ...;
    var reportContainer = document.getElementById('reportContainer');
    powerbi.embed(reportContainerDiv, config);
}

function removeReport(){
    var reportContainer = document.getElementById('reportContainer');
    reportContainer.innerHTML = "";
}

然而，虽然我可以第一次显示报告并毫无问题地删除报告，但对 ShowReportAsync 的后续调用不起作用。我仍然可以观察到正在执行的 JS 方法。但报告未嵌入，容器 div 仍为空。

我在这里错过了什么？有没有更好的方法来实现这个？

Answer 1

您可以使用 powerbi.reset(element) 而不是更改 innerHTML。此方法从服务中删除嵌入以及 iframe。

function removeReport(){
    var reportContainer = document.getElementById('reportContainer');
    powerbi.reset(reportContainer);
}

参考：

https://docs.microsoft.com/javascript/api/overview/powerbi/work-with-powerbi-instance

尝试在 Blazor 页面上嵌入 Power BI 报告失败

Attempt to embed back Power BI report fails on Blazor page

powerbi

powerbi-embedded

blazor