Metabase embedding学习，实现将Metabase嵌入到其他应用中

深藏阁楼爱情的钟 2022-03-18 08:18 801阅读 0赞

*  学习网址：[https://metabase.com/docs/v0.23.0/administration-guide/13-embedding.html][https_metabase.com_docs_v0.23.0_administration-guide_13-embedding.html]
 *  具体操作步骤

1.打开Metabase管理者设置页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

2.按照图片所示，点击“Enable”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

3.点击后到用户数据图的具体页面，点击图上对应位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

4.按照图示操作

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

5.按照图示操作，因为Metabase里面有很多用户，要想实现插入到我们的应用后，不同用户呈现自己对应的图标，所以应该选择专属的参数，修改完毕后点击publish

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

6.按照图示操作，点击code，出现两段代码，第一段代码是js代码，第二段是html代码，将代码粘贴到合适的位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]

7.报错信息

7.1解决下图的问题，只需要给iframeUrl加上判断，当参数payload里面的params为空时，iframeUrl为空，否则才是上面的那段代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]

7.2解决下图的问题，暂时不会等待更新

![20190221104944239.png][]

8.截取我最后成功的部分代码

import React, { Component } from "react";
    import { connect } from "react-redux";
    import { getMedicalStatus } from "../action/patientAction";
    import moment from "moment";
    import jwt from "jsonwebtoken";
    class UserStatus extends Component {
      async componentDidMount() {
        const { getMedicalStatus } = this.props;
        const id = window.location.href.split("=")[1];
        getMedicalStatus(id);
      }
      render() {
        const METABASE_SITE_URL = "....此处隐藏";
        const METABASE_SECRET_KEY =
          "....此处隐藏";
        const medicalDate = moment()
          .add(-2, "days")
          .format("YYYY-MM-DD_HH:mm:SS");
        let payload = {
          resource: { dashboard: 11 },
          params: {
            userid: this.props.medicalStatus.userId,
            time: medicalDate,
            name: this.props.medicalStatus.fullName
          }
        };
        let token = jwt.sign(payload, METABASE_SECRET_KEY);
        let iframeUrl =
          METABASE_SITE_URL +
          "/embed/dashboard/" +
          token +
          "#bordered=true&titled=true";
        return (
          <div className="device-detail-container">
            <iframe
              title="myFrame"
              src={iframeUrl}
              frameBorder="0"
              width="100%"
              height="600"
              overflow="auto"
            />
          </div>
        );
      }
    }
    const mapStateToProp = state => ({
      medicalStatus: state.patientsListStore.medicalStatus
    });
    
    const mapDispatchToProp = dispatch => ({
      getMedicalStatus: userId => dispatch(getMedicalStatus(userId))
    });
    export default connect(
      mapStateToProp,
      mapDispatchToProp
    )(UserStatus);

按照上面的方法，iframe并没有自适应高度，解决方法如下

npm insatll react-iframe-resizer-super --save
    npm install iframe-resizer --save

1.创建一个组件，文件名为iframe

import ReactIframeResizer from "react-iframe-resizer-super";
    import React, { Component } from "react";
    class Iframe extends Component {
      render() {
        const iframeResizerOptions = { checkOrigin: false };
        console.log("props", this.props.iframeurl);
        return (
          <ReactIframeResizer
            src={this.props.iframeurl}
            iframeResizerEnable={true}
            ref="frame"
            iframeResizerOptions={iframeResizerOptions}
          />
        );
      }
    }
    export default Iframe;

然后在另外一个组件中引用即可

出现警告：\[iFrameSizer\]\[Host page: iFrameResizer0\] Ignored iFrame, already setup.

解决方法如下：在源码中修改

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8][]

[https_metabase.com_docs_v0.23.0_administration-guide_13-embedding.html]: https://metabase.com/docs/v0.23.0/administration-guide/13-embedding.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220318/808ce13a0b014fe5ad8b17f3573cf611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20220318/9f400026af7f499e92308a103b153895.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220318/44a8677966044c888e93e4b31785cb6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: /images/20220318/64e8c152ac0d4e01a5f86390bb50fe6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: /images/20220318/d98e5915f6c54b9dbc88a5c9e07c8d3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: /images/20220318/1207de58f5854c25a52adff1c8d0510a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: /images/20220318/cab7139348294d409c58961186bfff76.png
[20190221104944239.png]: /images/20220318/2dd8260e93a849158bc8baecfd4e38cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7]: /images/20220318/21e1cfb655e94161a8865b0cce43b5a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8]: /images/20220318/d9894f5878824f52afc660d8db099d71.png