---
schema_version: "1"
id: 726e8947abb00e40a2c53ec0f21b0c38d2cdb6e973c514197554646c4dfd1a59
title: 嵌入仪表板
collection: tableau
version: next
locale: zh-cn
portal_url: https://docs.salesforce.com/tableau/next/zh-cn/pro/desktop/embed_dashboard.md
canonical_url: https://help.tableau.com/v0.0/pro/desktop/zh-cn/embed_dashboard.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 7528f600561e57bcc8ed1803c812996d7e9246862d96d28ee789764683231d2d
description: Tableau Server 2022
---
[跳转到主要内容](#main-content)

# 嵌入仪表板

> [!TIP]
> 
> Tableau Server 2022.3 及更高版本以及 Tableau Cloud 的嵌入代码已更改为使用嵌入 API v3。有关设备特定布局和仪表板大小的最新信息，请参见[嵌入 API 帮助](https://help.tableau.com/current/api/embedding_api/zh-cn/index.html)中的[配置嵌入对象和组件](https://help.tableau.com/current/api/embedding_api/fzh-cn/docs/embedding_api_configure.html#table-of-properties-and-values-for-embedded-objects-and-components)。本主题中的信息适用于嵌入的早期版本（使用 Tableau JavaScript API v1 和 v2）。

使用嵌入的早期版本嵌入仪表板

您可以在自己的网站或 wiki 页面中嵌入 Tableau 仪表板，并且可以根据 iframe 的大小在不同布局中显示该仪表板。

- 若要为您的用户自动显示正确的布局，而不考虑他们所使用的设备，请在 Tableau Desktop 中为您的仪表板创建特定于设备的布局。当您这样做时，Tableau Server 和 Tableau Cloud 会根据 iframe 大小自动显示正确的布局，前提是您为 iframe 的宽度和高度使用 100%，而不是确切的像素值（参见下文）。
- 若要始终显示某个布局而不考虑 iframe 大小，请在嵌入代码中使用 `device` 参数。

在下面的示例中，嵌入代码显示 800 像素宽 x 600 像素高的仪表板。确切宽度和高度值是您在视图或仪表板顶部单击“共享”按钮时获得的默认嵌入代码的一部分。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' **style='width: 800px; height: 600px;'** >
  <object class='tableauViz' width='**800**' height='**600**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

在仪表板使用设备特定布局的此示例中，已经移除了 div class 的样式属性，并将宽度和高度的 object class 值替换为 100%。大多数情况下会显示正确的布局；也就是说，在未同时在 CSS 中的其他地方对宽度和高度进行控制的情况下，会显示正确的布局。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder' >
  <object class='tableauViz' width='**100%**' height='**100%**' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />		
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

如果正确的布局未显示，则可能是因为您用于嵌入的 HTML 页面具有 `<!DOCTYPE html>` 标记，而该标记会使页面正文中的项无法在大小调整为 100%（请参见 [Stack Overflow 上的详细信息](https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this)）。解决方法是向 HTML 页面的正文中添加以下各行：

<style>
  html, body { height: 100% }
</style>

以下示例假定嵌入式仪表板具有特定于设备的布局。`device` 参数已设置为 `phone`。这意味着无论哪个设备显示仪表板，为电话创建的布局将会是所显示的布局。

<script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz\_v1.js'></script>
  <div class='tableauPlaceholder'>
  <object class='tableauViz' width='100%' height='100%' style='display:none;'>
  <param name='host\_url' value='http://mysite.myserver.com' />
  <param name='site\_root' value='' />
  <param name='name' value='ProfitAnalysis/Sales\_Dashboard' />
  <param name='device' value='**phone**' />			
  <param name='tabs' value='yes' />
  <param name='toolbar' value='yes' />
  <param name='filter' value=':original\_view=yes' /></object></div>

## iframe 尺寸和设备布局

设备显示的仪表板布局以其中显示 Tableau 视图的 iframe 的最小尺寸（高度和宽度）为基础。有时，台式机、平板电脑或手机布局可能会出现在其他类型的设备上。举例来说，如果台式计算机的显示器或浏览器容器很小，则平板电脑布局可能出现在台式计算机上。

<table style="width: 100%;"><colgroup><col><col></colgroup><tbody><tr><th style="text-align: left;">如果 iframe 最小尺寸为...</th><th style="text-align: left;">此设备布局将出现...</th></tr><tr><td>500 像素或更低</td><td>手机</td></tr><tr><td>介于 501 和 800 像素之间</td><td>平板电脑</td></tr><tr><td>大于 800 像素</td><td>台式机</td></tr></tbody></table>

有关如何创建使用设备特定布局的仪表板的详细信息，请参见[针对不同设备类型创建仪表板布局](https://help.tableau.com/v0.0/pro/desktop/zh-cn/dashboards_dsd_create.htm)。