我试图将Tableau对象嵌入Blazor应用程序的剃须刀页面中，但无法正常工作，它显示空白页面，并且不会在浏览器控制台中记录任何错误。
以下是剃须刀页面。
剃刀
@page "/tableau"
<h3>Tableau Example</h3>
<body>
<div class='tableauPlaceholder' style='width: 1700px; height: 950px;'>
<object class='tableauViz' width='1700' height='950' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Ftableau.xxxxxx.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='/t/ITRD' />
<param name='name' value='AgileDEStrainingStatus/Agilemind-setTrainings' />
<param name='tabs' value='yes' /><param name='toolbar' value='yes' />
<param name='showAppBanner' value='false' />
<param name='filter' value='iframeSizedToWindow=true' /></object></div>
</body>
@code {
}
_host.cshtml
@page "/"
@namespace BlazorApplication.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApplication</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script type='text/javascript' src='https://tableau.xxxxxx.com/javascripts/api/viz_v1.js'></script>
</body>
</html>
我做错了什么？
谢谢
最佳答案
我无法复制您的确切样本，因为您的数据的URL显然是私有的，但是我在https://github.com/conficient/TableauSample处创建了一个Tableau样本，该样本使用basic example from the Tableau website
我按照您的示例使用了服务器端Blazor，并且能够加载示例。我认为您的代码中缺少的是没有Tableau库的启动？在Tableau示例中，它们调用设置函数：
<body onload="initViz();">
您不能在Blazor中执行此操作，因为不允许使用嵌入式JS，但可以使用JavaScript interop
我创建了一个基本的interop file来做到这一点：
window.initViz = function (containerDiv, url) {
// containerDiv: element to update - use @ref in Blazor to get this
console.log("initViz called for " + url);
var options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
console.log("initViz calling .Viz()");
var viz = new tableau.Viz(containerDiv, url, options);
}
我还通过传递了一个
ElementReference而不是id来更改示例-如果将来要构建组件，则这是一个好习惯，因为您无需命名元素，并且可以在一个元素上具有多个实例。页。然后，我修改了
Index.razor页面以调用initViz中的OnAfterRenderAsync函数。