如何移除Power BI Embedded报表视觉对象及iframe的灰色边框？

Got it, let's tackle both of your border problems step by step:

1. Removing Gray Borders from Power BI Report Visuals #

You’ve got a few reliable ways to get rid of those visual object borders:

• Adjust Visual Formatting in Power BI Desktop/Service
  This is the simplest, no-code approach. Open your report, select the visual with the gray border, head to the Format pane (the paintbrush icon), find the Border section. Set the border width to 0 or change the color to transparent. Save the report and re-embed it—those borders should be gone.

• Use the Power BI JavaScript API (Dynamic Control)
  If you need to adjust borders after embedding, use the API to update visual settings. Here's a quick snippet:

  // Get the target visual by name
  const targetVisual = await report.getVisualByName("YourVisualDisplayName");
  // Update border settings to hide it
  await targetVisual.updateSettings({
    visualSettings: {
      border: {
        show: false,
        width: 0
      }
    }
  });
  

  Just replace "YourVisualDisplayName" with the actual name of your visual.

• Custom CSS (Use with Caution)
  Power BI Embedded runs in a sandbox, but if your embedding setup allows it, you can target the visual's container with CSS. For example:

  .powerbi-visual-container {
    border: none !important;
  }
  

  Note: This might break if Power BI updates its DOM structure, so stick to the first two methods whenever possible.

2. Removing Gray Borders Only on the Left/Right of the Iframe #

This usually boils down to iframe styling, report page settings, or embedding configuration. Try these fixes:

• Clean Up Iframe CSS
  First, make sure your iframe itself has no borders. Add these styles to your iframe tag:

  <iframe 
    src="your-embedded-report-url"
    style="border: none; width: 100%; height: 100%;"
    scrolling="no"
  ></iframe>
  

  Also check the parent container of the iframe—if it has padding or margins, that might create a "border-like" gap. Set padding: 0; margin: 0; on the parent div.

• Adjust Report Page Margins
  Open your report in Power BI Desktop, go to Page settings (under the View tab), and set the left and right page margins to 0. This ensures the report content stretches to the full width of the iframe, eliminating those side gaps.

• Optimize Embedding Layout Settings
  When configuring your embedded report via the API, use the custom layout setting to force the report to fit the iframe width:

  const embedConfig = {
    type: 'report',
    id: 'your-report-id',
    embedUrl: 'your-embed-url',
    accessToken: 'your-access-token',
    settings: {
      layoutType: models.LayoutType.Custom,
      customLayout: {
        displayOption: models.DisplayOption.FitToWidth
      }
    }
  };
  

  This tells Power BI to scale the report to match the iframe's width, so no side borders appear.

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