<style>
#reportContainer {
width: 100%;
height: 750px;
background-color: white;
padding: 0px;
clear: both;
}
.desktop-view iframe, .mobile-view iframe {
border: none;
}
</style>
<h2>Sample PowerBI Embedded Report</h2>
<div class="desktop-view" style="display: block;">
<div id="reportContainer"></div>
</div>
对于报告,您可以执行以下操作以使背景透明(并且还可以适应宽度)。
var embedConfig = {
type: type,
id: id,
embedUrl: embedUrl,
viewMode: getViewModeFromModel(viewMode),
tokenType: models.TokenType.Aad,
accessToken: token,
pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
pageName: pageName,
// See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true,
background: models.BackgroundType.Transparent,
// START Report specific settings
layoutType: models.LayoutType.Custom,
customLayout: {
displayOption: models.DisplayOption.FitToWidth
}
// END Report specific settings
}
}
只需添加此CSS代码即可删除PowerBI生成的iframe边框。 它对我非常有效。
<style>
iframe { border: none; }
</style>