如何將報表嵌入到第三方系統中 - Quick BI

Quick BI支援將群空間中的報表（儀表板、試算表）嵌入到其他系統中，以便和其他應用系統整合，更便捷實現業務一體化應用。下面為您介紹如何將報表嵌入到第三方系統中，本文適用於進階版和專業版。

使用限制

基礎版方案僅支援儀表板和試算表的嵌入。
對於需要將試算表填報頁面嵌入第三方環境的使用者：由於部分系統瀏覽器禁止非同源的 iframe 嵌入頁面寫入 cookie，導致複雜表格填報頁面提交資料失敗。例如在 iOS 系統的企業微信內建瀏覽器中，開啟在第三方環境嵌入的複雜表格填報頁面，填寫資料並提交後，出現資料提交失敗的情況。
因此，建議您直接通過 Quick BI 平台使用試算表填報功能。

背景資訊

如果您需要將Quick BI報表嵌入並應用到您的系統中，可以設定報表嵌入功能。
- 當您使用Quick BI進階版時，第三方報表嵌入後無法區分資料許可權，報表嵌入後行級許可權功能無法生效，和報表的作者資料許可權保持一致，且不支援嵌入安全增強方案。
- 當您使用Quick BI專業版時，第三方報表嵌入後支援區分資料許可權。即，專業版支援實現同一份報表，不同使用者看不同的資料，且支援嵌入安全增強方案，詳情請參見報表嵌入資料許可權控制和傳參的安全增強方案。
國際站目前有5個網站，網域名稱如下：
- 新加坡：bi-ap-southeast-1.data.aliyun.com
- 中國香港：bi-cn-hongkong.data.aliyun.com
- 馬來西亞吉隆坡：bi-ap-southeast-3.data.aliyun.com
- 德國法蘭福克：bi-eu-central-1.data.aliyun.com
- 印尼：bi-ap-southeast-5.data.aliyun.com

說明

本文以中國香港的網域名稱為例進行連結拼接，其他網站使用時請替換為對應網站的網域名稱。

步驟1：開通需要嵌入的報表

僅當報表是發布狀態時，才支援設定報表嵌入功能。

您可以從開放平台模組開通報表嵌入：

在Quick BI產品首頁，按照下圖指引，進入嵌入報表頁面。
在新增嵌入報表頁面，選擇目標工作空間和資料物件類型後，在列表中選中資料對象名稱後，單擊開通嵌入。
若報表太多時，您也可以輸入報表名稱，協助您快速搜尋到目標報表。

在報表嵌入配置對話方塊，進行以下配置。

參數名稱	描述
內嵌物件	選擇嵌入的對象。選擇頁面整體，則嵌入的對象為當前儀表板。選擇某個組件，則嵌入的對象為當前儀表板下的某個組件。
展示型配置	嵌入後，是否攜帶當前儀表板的標題。
安全認證類型和Ticket連結	選擇Ticket認證並產生Ticket連結。您可以手動輸入Ticket連結或者單擊快捷產生，產生Ticket。說明在產生Ticket的介面，基礎方案僅支援設定有效時間長度。若您購買的版本支援增強方案，則可以額外設定綁定使用者、有效時間長度、浮水印參數、訪問次數和全域參數，請參見報表嵌入資料許可權控制和傳參的安全增強方案。
擷取內嵌程式碼	支援產生URL連結和Iframe代碼。

單擊複製。

步驟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：
4. 擷取accessTicket
  將上述步驟擷取的accessId、accessKey、aliyunUid和worksId參數拼接到如下請求地址中，並發送get請求擷取accessTicket。
  https://bi-cn-hongkong.data.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-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

步驟3：拼接免登URL

說明

本方案不支援綁定人鑒權，預設以報表owner的身份去訪問免登報表。

拼接流程及樣本見下表。

流程	儀表板樣本	試算表樣本
1、擷取Quick BI網域名稱	`bi-cn-hongkong.data.aliyun.com/`	`bi-cn-hongkong.data.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`

拼接格式及報表URL如下。

儀表板的拼接格式為https://<Quick BI網域名稱>/<預覽報表URL>?pageId=<報表ID>&accessTicket=<AccessTicket>，則產生的URL為：
```
https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```
試算表的拼接格式為https://<Quick BI網域名稱>/<預覽報表URL>?id=<報表ID>&accessTicket=<AccessTicket>，則產生的URL為：
```
https://bi-cn-hongkong.data.aliyun.com//token3rd/report/view.htm?id=<42****18ef6>&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6
```

擷取Quick BI網域名稱。
例如，Quick BI中國香港站網域名稱為bi-cn-hongkong.data.aliyun.com/，以具體環境網域名稱為準。
擷取預覽報表URL。
報表對應的預覽頁面URL如下，您可以根據需要選擇。
- 儀表板：token3rd/dashboard/view/pc.htm
- 試算表：token3rd/report/view.htm
在報表編輯頁面，擷取報表ID。
- 儀表板ID
  在儀表板編輯頁面，擷取地址欄中儀表板pageId的值。
- 試算表ID
  在試算表編輯頁面，擷取地址欄中試算表ID的值。
將上述步驟擷取的Quick BI網域名稱、預覽報表URL、報表ID和步驟2擷取的AccessTicket參數拼接到如下請求地址中。
- 儀表板的拼接格式https://<Quick BI網域名稱>/<預覽報表URL>?pageId=<報表ID>&accessTicket=<AccessTicket>
- 試算表的拼接格式https://<Quick BI網域名稱>/<預覽報表URL>?id=<報表ID>&accessTicket=<AccessTicket>

管理嵌入的報表

對已嵌入的第三方報表，可以執行如下操作：

查詢已嵌入的報表：在報表列表頁面的搜尋方塊中，輸入報表名稱關鍵字並單擊表徵圖，查詢報表。
您可以通過選擇報表的工作空間或報表類型，縮小搜尋範圍。
查看已嵌入的報表數量。請參見查看嵌入報表數量。
刪除已嵌入的報表：單擊報表後的表徵圖，刪除報表。

查看嵌入報表數量

在Quick BI產品首頁單擊開放平台。
在左側導覽列單擊嵌入分析。
在報表嵌入頁面，您可以看到嵌入到第三方的報表數量。

如何解決報表嵌入時“access report_tree unauthorized”報錯？

問題描述

當使用報表第三方嵌入功能時，報錯資訊如下圖所示。

存在原因

沒有在對應的群空間內開通報表許可權。

解決方案

您可以按照如下操作自主開通報表許可權。

嵌入Quick BI的第三方報表如何自適應高度（PC端）？

問題描述

第三方使用Iframe嵌入Quick BI儀表板時，由於瀏覽器本身跨域安全限制，無法擷取Iframe中儀表板的高度，會導致儀表板出現捲軸的現象。

解決方案

Quick BI在載入儀表板時，會將當前儀表板的高度通過postMessage的方式傳到外部頁面。外部頁面可通過事件監聽的方式擷取儀表板的高度和ID。

您可以通過兩種方式操作：

主動傳遞Iframe內容高度給外部頁面。

// Quick BI地址，如使用其他地址可自行補充
const quickBIURL = ['https://bi-cn-hongkong.data.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-cn-hongkong.data.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-cn-hongkong.data.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-cn-hongkong.data.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%會有相容性問題 */
}