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

步骤1:通过HTTPS接口获取accessToken

本文以嵌入群空间中的仪表板至第三方系统为例。
  • 如果开通仪表板接入权限的账号拥有开发或分析权限,则只能开通该账号创建的仪表板权限。
  • 如果该账号拥有管理权限,则可以开通该工作空间所有报表权限。
  1. 获取AccessKey ID和AccessKey Secret。
    1. 登录Quick BI控制台
    2. 在Quick BI首页,按照下图指引,获取AccessKey ID和AccessKey Secret。
      5
  2. 获取Aliyun ID。
    • 如果您使用的是主账号,则登录账号为Aliyun ID。获取方法请参见获取阿里云账号
      安全设置页面,查看到的登录账号,即为此处的参数Aliyun ID对应的值。1
    • 如果您使用的是子账号,则Aliyun ID为主账号的账号名:子账号
      假设主账号的账号名为test,子账号为zhangsan@sdf123.onaliyun.com,则Aliyun ID为test:zhangsan
      说明 您可以联系主账号管理员获取该子账号对应的主账号。
  3. 获取Token。
    将上述步骤获取的AccessKey ID、AccessKey Secret和Aliyun ID参数拼接到如下请求地址中,并发送get请求获取Token。
    https://bi.aliyun.com/api/ac3rdservice/token.json?accessId=xxx&accessKey=xxx&aliyunId=xxx&validityTime=60
    successtrue时,表示获取token成功。此时accessToken的值即为token。1
    说明 如果您在accessToken有效期内再次发送请求获取或访问报表,都会自动延迟默认设置的token有效时长。

    validityTime最大值为240,单位:分钟。

    例如,第一次获取validityTime并设置为10分钟,如果10分钟之内您再次发送请求,会在此基础上延长10分钟:
    • 当超过token的有效时长后再次获取validityTime,token内容才会改变。
    • 如果想要立即取消token时效,可以发送如下post请求,并适配对应的参数值。
      https://bi.aliyun.com/api/ac3rdservice/tokenInvalid.json?aliyunId=XXX&accessToken=XXX。

    如果出现AE0530010001 第三方鉴权失败报错,请参见如何解决“AE0530010001 第三方鉴权失败”报错?

步骤2:添加需要嵌入的仪表板

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

  1. 在Quick BI产品首页,按照下图指引,进入新建嵌入报表页面。
    1
  2. 新增嵌入报表页面,选择目标工作空间,并选中数据对象名称后,单击确定嵌入报表4.1
    若数据对象太多时,您也可以筛选数据对象类型,帮助您快速找到数据对象。
此时您可以在报表嵌入页面的列表中,看到新嵌入的报表。嵌入报表4.1

步骤3:拼接免登URL

  1. 在Quick BI首页,单击工作台 > 仪表板
  2. 在仪表板管理页面,选择步骤2中待嵌入的第三方报表,单击1图标。
  3. 在报表预览页面,按照下图指引,获取访问报表的地址。
    获取地址4.1
    说明 系统支持修改预览地址的域名。当前Quick BI统一对外的访问域名为https://bi.aliyun.com,如果您仍然在使用https://das.base.shuju.aliyun.com,建议您替换成https://bi.aliyun.com
  4. 步骤1:通过HTTPS接口获取accessToken拼接到报表的URL后面,免登录即可查看报表。
    示例如下。
    https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=703d6621-7aa0-4716-bcc1-515e3da794c2&accessToken=XXXXX

管理嵌入的报表

对已嵌入的第三方报表,可以执行如下操作:
  • 查询已嵌入的报表:在报表列表页面的搜索框中,输入报表名称关键字并单击查询图标,查询报表。

    您可以通过选择报表的工作空间或报表类型,缩小搜索范围。

  • 查看已嵌入的报表数量。请参见查看嵌入报表数量
  • 删除已嵌入的报表:单击报表后的删除图标,删除报表。

查看嵌入报表数量

  1. 在Quick BI产品首页单击开发者中心
  2. 在左侧导航栏单击报表嵌入
    报表嵌入页面,您可以看到嵌入到第三方的报表数量。1
    表 1. 可嵌入报表数量说明
    版本 购买用户数 嵌入第三方数量
    高级版 5 5
    10 10
    20 20
    50 50
    100 100
    150 150
    200 200
    专业版 50 100
    100 200
    200 500
    300 1000

如何解决“AE0530010001 第三方鉴权失败”报错?

报错如下所示。1

解决方案

请检查AccessKey ID、AccessKey Secret和Aliyun ID参数的值是否填写正确。请参见步骤1:通过HTTPS接口获取accessToken

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

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

可能原因

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

解决方案

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

嵌入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" 
      //<page_Id>为仪表板页面的ID,access_Token为访问仪表板的准入令牌
      src="https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=<page_Id>&accessToken=<access_Token>
      scrolling="no" 
      frameborder="0" 
      width="100%" 
      height="600">
    </iframe>

        <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形式,嵌入到第三方应用如何设置宽度?

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

解决方案:修改Iframe样式。

请严格按照以下示例代码修改:
iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px;  // 高度需使用固定值,可在获取到屏幕高度后动态设置,height: 100%会有兼容性问题
}