如何将本地 Tableau 报告嵌入到 HTML

Question

我正在尝试使用 javascript + html 将一个 Tableau 报表嵌入到网页中，并创建一些按钮/栏来与之交互。

但是，我被困在第一步：显示报告。

我在这里学习了第一个示例：http://onlinehelp.tableau.com/samples/en-us/js_api/tutorial.htm。

该示例运行良好。我可以看到网页中显示的 Tableau 报告，并且所有按钮/控件都可以正常工作。

所以我对javascript函数initializeViz()做了一点改动，以便以同样的方式显示我的报告，如下所示：

function initializeViz() {              
            var placeholderDiv = document.getElementById("tableauViz");
            var url = "file://localhost/C:/reports/Resilience.twb";
            var options = {
                width: placeholderDiv.offsetWidth,
                height: placeholderDiv.offsetHeight * 20,
                hideTabs: true,
                hideToolbar: true,
                onFirstInteractive: function () {
                    workbook = viz.getWorkbook();
                    activeSheet = workbook.getActiveSheet();
                }
            };

            viz = new tableau.Viz(placeholderDiv, url, options);
        }

上述函数停止显示任何内容。我在浏览器中检查了本地文件链接file://localhost/C:/reports/Resilience.twb，它可以正常工作。

所以我真的很困惑，因为我只做了最小的更改，并且指向本地文件的 URL 链接有效，那么可能导致问题的原因是什么？请帮助我，任何想法表示赞赏。

Answer 1

您确定您对路径的表示是正确的吗？您确实说 C:/reports/Resilience.twb 存在，但 localhost 类型路径通常采用 file:///localhost:port/path/ 格式，而 C: 对我来说似乎很奇怪。尝试使用开始菜单中的“运行”（在 Windows 上）并输入“\localhost\”，然后从那里导航以找到完整路径。

编辑： 据我所知you cannot display a desktop dashboard file on a webpage。您必须将其发布到 tableau 服务器。因此，您的 URL 必须指向视图而不是文件。我制作了培训页面的本地副本，并按照您在上面所做的那样修改了 var 选项（高度），并使用教程视图和我可以访问的另一个视图对其进行了测试，并且在这两种情况下都有效。

查看此文档： http://onlinehelp.tableau.com/current/online/en-us/embed.htm