如何在网页嵌入无需登录且无底部导航栏的Power BI可视化内容？

核心结论 #

发布到Web的公开嵌入方式，其底部导航栏（含品牌标识、页面切换、分享链接）是微软官方默认强制显示的，无法通过官方嵌入参数直接移除。以下是两种可行的解决路径：

方案1：使用Power BI Embedded（官方付费方案，推荐生产环境） #

这是针对非AD用户嵌入报表的标准解决方案，支持完全自定义嵌入体验，无强制品牌栏：

• 先购买Power BI Embedded容量（A系列SKU，按算力计费）
• 将报表发布到Power BI工作区，配置嵌入权限：使用服务主体(service principal)生成嵌入令牌，无需用户登录AD
• 通过Power BI JavaScript SDK嵌入时，可通过配置参数隐藏所有不需要的UI元素：

  const embedConfig = {
    type: 'report',
    id: '<报表ID>',
    embedUrl: '<嵌入地址>',
    tokenType: models.TokenType.Embed,
    accessToken: '<你的嵌入令牌>',
    settings: {
      navContentPaneEnabled: false, // 隐藏左侧导航
      footerEnabled: false, // 隐藏底部栏（官方支持）
      panes: {
        filters: { visible: false }, // 按需隐藏筛选面板
        pageNavigation: { visible: false } // 隐藏页面切换
      }
    }
  };
  

• 该方案完全符合官方规范，稳定可靠，支持自定义报表交互、权限控制等高级功能。

方案2：前端CSS隐藏（临时hack，不推荐生产环境） #

如果暂时无法使用付费方案，可尝试通过前端CSS隐藏底部导航栏，但需注意微软可能随时修改DOM结构导致失效：

• 首先找到嵌入iframe中底部栏对应的DOM元素类名（比如通过浏览器开发者工具查看，常见类名如.powerbi-report-footer）
• 若嵌入页面与报表同域，可直接在父页面添加CSS：

  iframe .powerbi-report-footer {
    display: none !important;
  }
  

• 若跨域，需通过JavaScript向iframe注入样式（需确保CORS配置允许，或使用同域代理），示例代码：

  const iframe = document.getElementById('powerbi-iframe');
  iframe.onload = function() {
    const css = '.powerbi-report-footer { display: none !important; }';
    const style = document.createElement('style');
    style.textContent = css;
    iframe.contentDocument.head.appendChild(style);
  };
  

• 风险提示：该方法属于非官方操作，微软更新嵌入组件后可能失效，且可能违反Power BI服务条款，生产环境谨慎使用。

内容的提问来源于stack exchange，提问作者someName