如何将报表嵌入到第三方系统中_Quick BI-阿里云帮助中心

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

背景信息

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

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

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

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

您可以使用以下任意一种方式开通报表嵌入：https://help.aliyun.com/document_detail/391291.html#section-avs-9j0-r64。

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

本文以嵌入群空间中的仪表板至第三方系统为例。

如果开通仪表板接入权限的账号拥有开发或分析权限，则只能开通该账号创建的仪表板权限。
如果该账号拥有管理权限，则可以开通该工作空间所有报表权限。
1. 按照下面的操作流程，获取AccessKey ID和AccessKey Secret，即accessId和accessKey。
  1. 登录Quick BI控制台。
  2. 在Quick BI首页，按照下图指引，获取AccessKey ID和AccessKey Secret。
2. 获取阿里云账号ID，即aliyunUid。
  登录阿里云账号，点击头像右上角查看账号ID。
3. 在报表编辑页获取报表ID，即worksId，请参见：https://help.aliyun.com/document_detail/391291.html#step-79r-pw8-gja。
4. 获取accessTicket
  将上述步骤获取的accessId、accessKey、aliyunUid和worksId参数拼接到如下请求地址中，并发送get请求获取accessTicket。
  https://bi.aliyun.com/openapi/ac3rd/ticket/create?worksId=xx&aliyunUid=xx&accessKey=xx&accessId=xx&validityTime=xx
  说明
  aliyunUid 仅用于生成accessTicket时，校验当前角色是否有组织报表的开通免登权限，不做三方嵌入报表的身份绑定。
  validityTime为非必传参数，取值范围为1~240，默认值为240，单位：分钟。
  如果想要立即取消accessTicket的失效，可以发送post请求，填入aliyunUid、accessId、accessKey和accessTicket对应的值。
  http://bi.aliyun.com/openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

步骤3：拼接免登URL

请参见：https://help.aliyun.com/document_detail/391291.html#section-cax-1je-klc。

说明

本方案不支持绑定人鉴权，默认以报表owner的身份去访问免登报表。

管理嵌入的报表

对已嵌入的第三方报表，可以执行如下操作：

查询已嵌入的报表：在报表列表页面的搜索框中，输入报表名称关键字并单击图标，查询报表。
您可以通过选择报表的工作空间或报表类型，缩小搜索范围。
查看已嵌入的报表数量。请参见查看嵌入报表数量。
删除已嵌入的报表：单击报表后的图标，删除报表。

查看嵌入报表数量

在Quick BI产品首页单击开放平台。
在左侧导航栏单击嵌入分析。
在报表嵌入页面，您可以看到嵌入到第三方的报表数量。
可嵌入报表数量说明
版本
购买用户数
嵌入第三方数量
高级版
5
5
10
10
20
20
50
50
100
100
150
150
200
200
专业版
50
100
100
200
200
500
300
1000
说明
以上为各版本嵌入报表默认数，如需增购，请参见Quick BI计费方式。

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

问题描述

当使用报表第三方嵌入功能时，报错信息如下图所示。

存在原因

没有在对应的群空间内开通报表权限。

解决方案

您可以按照如下操作自主开通报表权限。

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

问题描述

第三方使用Iframe嵌入Quick BI仪表板时，由于浏览器本身跨域安全限制，无法获取Iframe中仪表板的高度，会导致仪表板出现滚动条的现象。

解决方案

Quick BI在加载仪表板时，会将当前仪表板的高度通过postMessage的方式传到外部页面。外部页面可通过事件监听的方式获取仪表板的高度和ID。

您可以通过两种方式操作：

主动传递Iframe内容高度给外部页面。

// 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);

外部页面主动通过postMessage到Iframe页面获取仪表板高度。

其中：

Iframe为嵌入Quick BI仪表板的Iframe。
message传入的data中必须包含{ getDashboardHeight: true }。

代码块示例如下。

// 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}, '*');

说明

Quick BI仪表板的宽度会随外层容器自适应，因此不会出现纵向滚动条，不需要适配宽度。

完整示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <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>
    <body>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi.aliyuncs.com/token3rd/dashboard/view/pc.htm?useBodyAutoHeight=true&pageId=<page_Id>&accessToken=<access_Token>"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true>为页面body高度自适应， <page_Id>为仪表板页面的ID，access_Token为访问仪表板的准入令牌 -->
        <script>
      // Quick BI地址，如使用其他地址可自行补充
      const quickBIURL = ['https://bi.aliyuncs.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形式，嵌入到第三方应用如何设置宽度？

问题描述

由于Iframe在低版本IOS上兼容性问题，导致iframe实际宽度溢出，出现仪表板整体左右滑动、固定列表格无法滑动、图表展示截断、查询控件弹出框错位等异常现象。

解决方案

修改Iframe样式。

请严格按照以下示例代码修改：

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

版本	购买用户数	嵌入第三方数量
高级版	5	5
	10	10
	20	20
	50	50
	100	100
	150	150
	200	200
专业版	50	100
	100	200
	200	500
	300	1000

背景信息

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

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

步骤3：拼接免登URL

管理嵌入的报表

查看嵌入报表数量

可嵌入报表数量说明

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

问题描述

存在原因

解决方案

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

问题描述

解决方案

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

问题描述

解决方案