为视图编写嵌入代码
Tableau Server 2022.3 及更高版本以及 Tableau Cloud 的嵌入代码已更改为使用嵌入 API v3。有关如何使用嵌入 API v3 嵌入视图的最新信息,请参见嵌入 API 帮助中的基本嵌入。本主题中的信息适用于嵌入的早期版本(使用 Tableau JavaScript API v1 和 v2)。
如果您要编写您自己的嵌入代码,则可采用以下两种方法之一:
使用 Tableau JavaScript:这是首选方法。使用 Tableau 生成的嵌入代码作为自己代码的起点,然后添加或编辑用于控制工具栏、选项卡等的对象参数。依赖于 Tableau JavaScript 文件的默认嵌入代码也是控制多个嵌入视图的加载顺序的唯一方法。
指定视图 URL:使用 iframe 或 image 标记嵌入视图,其中的源是您在视图上单击“共享”并随后单击“复制连接”时获得的 URL。如果您无法在网站上使用 JavaScript,则可能需要这样做。还可能会有您仅指定了 URL 的情况。
在嵌入视图时,您应定义显示视图时将采用的宽度和高度。否则,客户端浏览器将会随意选取宽度和高度。
注意: 如果您需要在嵌入代码中为 Tableau Cloud 的服务器名称(举例来说,用于指向 JavaScript API 的位置),请使用 URL https://online.tableau.com。
使用 Tableau JavaScript
以下代码显示当您在已发布的视图上单击“共享”时生成的嵌入代码的示例。host_url
参数中的特殊字符是 URL 编码的,而 site_root
和 name
参数中的特殊字符被表示为 HTML 数字字符引用。
Tableau Server 示例:
<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> <param name='site_root' value=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Tableau Cloud 示例:
<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> <div class='tableauPlaceholder' style='width:800; height:600;'> <object class='tableauViz' width='800' height='600' style='display:none;'> <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> <param name='site_root' value='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /> </object> </div>
<script>
标记的源是 Tableau Server 和 Tableau Cloud JavaScript 文件 viz_v1 的 URL。。JavaScript 文件负责处理向您的用户显示的视图的完整 URL 的汇编。name
和 site_root
对象参数是唯一的必需参数;所有其他参数都是可选参数。
指定视图 URL
下面是使用 iframe 嵌入同一视图的示例,其中的源是您在视图上单击“共享”并随后单击“复制链接”时获得的 URL。
Tableau Server 示例:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Tableau Cloud 示例:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
必须指定 embed
URL 参数,并且您可以根据需要包括用于控制工具栏和恢复选项等的参数。您还可向用于控制加载视图时显示的特定数据的 URL 添加筛选器。
提示:使用此方法时,请将 HTML 属性 allowfullscreen="true"
添加到 iframe 元素以在视图上启用“全屏”按钮。