本文汇总了使用Quick BI开发者中心的常见问题。

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

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

可能原因

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

解决方案

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

  1. 在Quick BI产品首页单击开发者中心。
  2. 在左侧导航栏单击报表嵌入。
  3. 单击+ 新增嵌入报表。
  4. 在新增嵌入报表页面，选中允许嵌入第三方的报表，单击确定。
    新增报表嵌入-311

嵌入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%会有兼容性问题
}