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

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

本文以嵌入群空间中的仪表板至第三方系统为例。
  • 如果开通仪表板接入权限的账号拥有开发或分析权限,则只能开通该账号创建的仪表板权限。
  • 如果该账号拥有管理权限,则可以开通该工作空间所有报表权限。
  1. 获取AccessKey ID和AccessKey Secret。
    1. 登录Quick BI控制台
    2. 在顶部菜单栏单击配置面板图标。
    3. 组织管理页面,单击识别码页签。
    4. 依次单击Quick BI AccessKey IDQuick BI AccessKey Secret后的复制,获取AccessKey ID和AccessKey Secret。
      1
  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://das.base.shuju.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://das.base.shuju.aliyun.com/api/ac3rdservice/tokenInvalid.json?aliyunId=XXX&accessToken=XXX。

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

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

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

  1. 在Quick BI产品首页选择开放服务
  2. 分享中心选择报表嵌入,如下图所示。
    66
  3. 单击+ 新增嵌入报表
  4. 新增嵌入报表页面,选中允许嵌入第三方的报表,单击确定
    此时您可以在报表嵌入页面的列表中,看到新嵌入的报表。1

步骤3:拼接免登URL

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

管理嵌入的报表

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

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

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

查看嵌入报表数量

  1. 在Quick BI产品首页选择开放服务
  2. 分享中心选择报表嵌入
    报表嵌入页面,您可以看到嵌入到第三方的报表数量。1
    表 1. 可嵌入报表数量说明
    版本 购买用户数 嵌入第三方数量
    高级版 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

可能原因

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

解决方案

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

  1. 在Quick BI产品首页选择开放服务
  2. 分享中心选择报表嵌入
  3. 单击+ 新增嵌入报表
  4. 新增嵌入报表页面,选中允许嵌入第三方的报表,单击确定
    2

嵌入Quick BI的第三方报表如何自适应高度?

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

解决方案

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

您可以通过两种方式操作:
  • 主动传递Iframe内容高度给外部页面。
    // Quick BI地址,如使用其他地址可自行补充
    const quickBIURL = ['https://das.base.shuju.aliyun.com', '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://das.base.shuju.aliyun.com', '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://das.base.shuju.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://das.base.shuju.aliyun.com', '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>