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

Question

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

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

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

在某些情况下，我还需要删除该报告。如果用户愿意，可以将其嵌入。我删除嵌入报告的方法只是通过JS interop将容器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://learn.microsoft.com/javascript/api/overview/powerbi/work-with-powerbi-instance