如何将报表嵌入到第三方系统中_智能商业分析 Quick BI(Quick BI)-阿里云帮助中心

Quick BI 支持将群空间中的报表（仪表板、电子表格）嵌入到其他系统中，以便和其他应用系统集成，更便捷实现业务一体化应用。下面为您介绍如何将报表嵌入到第三方系统中，本文适用于高级版和专业版。

使用限制

基础版方案仅支持仪表板和电子表格的嵌入。
对于需要将电子表格填报页面嵌入第三方环境的用户：由于部分系统浏览器禁止非同源的 iframe 嵌入页面写入 cookie，导致复杂表格填报页面提交数据失败。例如在 iOS 系统的企业微信内置浏览器中，打开在第三方环境嵌入的复杂表格填报页面，填写数据并提交后，出现数据提交失败的情况。

因此，建议您直接通过 Quick BI 平台使用电子表格填报功能。

背景信息

如果您需要将 Quick BI 报表嵌入并应用到您的系统中，可以设置报表嵌入功能。

当您使用 Quick BI 高级版 时，第三方报表嵌入后无法区分数据权限，报表嵌入后行级权限功能无法生效，和报表的作者数据权限保持一致，且不支持嵌入安全增强方案。
当您使用 Quick BI 专业版 时，第三方报表嵌入后支持区分数据权限。即，专业版支持实现同一份报表，不同用户看不同的数据，且支持嵌入安全增强方案，详情请参见报表嵌入数据权限控制和传参的安全增强方案。

步骤 1：开通需要嵌入的报表

仅当报表是 发布状态 时，才支持设置报表嵌入功能。

您可以从开放平台模块开通报表嵌入：

在 Quick BI 产品首页，按照下图指引，进入嵌入报表页面。
在 新增嵌入报表 页面，选择目标工作空间和数据对象类型后，在列表中选中数据对象名称后，单击 开通嵌入 。若报表太多时，您也可以输入报表名称，帮助您快速搜索到目标报表。

能力项	基础方案	增强方案
绑定用户	报表 owner，且不可修改	支持自定义，千人千面
访问次数	每个 Ticket 最多 10 万次	不限量，支持自定义设置
水印	不支持	支持（大屏本身不支持水印除外）
有效时长	最大 240 分钟	支持自定义
全局参数	不支持	支持
区块嵌入	不支持	支持
跳转次数	仅可跳转一次例如：A 报表跳转到 B 报表后，B 报表无法再跳转到 C 报表。	支持跳转任意次数例如：A 报表跳转到 B 报表后，B 报表还能跳转到 C 报表，C 也能再继续往后跳转，以此类推。

流程	仪表板示例	电子表格示例
1、获取 Quick BI 域名	`bi.aliyun.com`	`bi.aliyun.com`
2、获取预览报表 URL	`token3rd/dashboard/view/pc.htm`	`token3rd/report/view.htm`
3、获取报表 ID	`dd0****83f`	`42****18ef6`
4、获取 accessTicket	`fd138bcb-****-4fde-b413-81bcee59bdb6`	`fd138bcb-****-4fde-b413-81bcee59bdb6`

```
https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```
```
https://bi.aliyun.com/token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```

// Quick BI地址，如使用其他地址可自行补充
const quickBIURL = ['https://bi.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // 使用postMessage传出的高度
    console.log('Quick BI Dashboard Height:', event.data.height);
    // 使用postMessage传出的仪表板页面ID
    console.log('Quick BI Dashboard Id:', event.data.pageId);
// 在仪表板加载之前进行监听
window.addEventListener('message', messageListener);

// Quick BI地址，如使用其他地址可自行补充
const quickBIURL = ['https://bi.aliyun.com/'];
function messageListener(event) {
  if (quickBIURL.includes(event.origin)) {
    // 使用postMessage传出的高度
    console.log('Quick BI Dashboard Height:', event.data.height);
    // 使用postMessage传出的仪表板页面ID
    console.log('Quick BI Dashboard Id:', event.data.pageId);
// 在仪表板加载之前进行监听
window.addEventListener('message', messageListener);
// 主动请求Quick BI仪表板高度
// 嵌入Quick BI仪表板的Iframe
const iframe = document.querySelector('iframe');
// message传入的data中必须包含{ getDashboardHeight: true }
iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true>为页面body高度自适应， <page_Id>为仪表板页面的ID，accessTicket为访问仪表板的准入令牌 -->
        <script>
      // Quick BI地址，如使用其他地址可自行补充
      const quickBIURL = ['https://bi.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // 使用postMessage传出的高度
          console.log('Quick BI Dashboard Height:', event.data.height);
          // 使用postMessage传出的仪表板页面ID
          console.log('Quick BI Dashboard Id:', event.data.pageId);
      // 在仪表板加载之前进行监听
      window.addEventListener('message', messageListener);
      // 嵌入Quick BI仪表板的Iframe
      const iframe = document.querySelector('iframe');
       // 主动请求Quick BI仪表板高度
      // message传入的data中必须包含{ getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* 高度需使用固定值，可在获取到屏幕高度后动态设置，height: 100%会有兼容性问题 */

使用限制

背景信息

步骤 1：开通需要嵌入的报表

步骤 2：通过 HTTPS 接口获取 accessTicket

步骤 3：拼接免登 URL

管理嵌入的报表

查看嵌入报表数量

如何解决报表嵌入时“access report_tree unauthorized”报错？

问题描述

存在原因

解决方案

嵌入 Quick BI 的第三方报表如何自适应高度（PC 端）？

问题描述

解决方案

移动端页面使用 Iframe 形式，嵌入到第三方应用如何设置宽度？

问题描述

解决方案