为视图编写嵌入代码

适用于： Tableau Cloud, Tableau Server

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=&#47;t&#47;Sales' /> 
							<param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
							<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='&#47;t&#47;Sales' /> 
							<param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
							<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 元素以在视图上启用“全屏”按钮。

回到顶部
感谢您的反馈!您的反馈已成功提交。谢谢!