如何将 tableau 嵌入 asp.net core blazor？

Question

我正在尝试将 tableau 对象嵌入 blazor 应用程序中的 razor 页面，但它不起作用，它显示空白页面，并且不会在浏览器控制台中记录任何错误。

下面是剃须刀页面。

Tableau.razor

    @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='&#47;t&#47;ITRD' />
            <param name='name' value='AgileDEStrainingStatus&#47;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>

我做错了什么？

谢谢

Answer 1

我无法复制您的确切示例，因为您数据的 URL 显然是私有的，但我在 https://github.com/conficient/TableauSample which uses the basic example from the Tableau website

创建了一个 Tableau 示例

我按照您的示例使用了 Server-side 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 页面以调用 OnAfterRenderAsync 中的 initViz 函数。

如何将 tableau 嵌入 asp.net core blazor？

How to embed tableau into asp.net core blazor?

tableau-api

asp.net-core

blazor

blazor-server-side