如何在单个网页中嵌入2份及以上Power BI报表

实现逻辑 #

• 为每一份待嵌入的Power BI报表准备独立的DOM容器、独立的嵌入配置，调用SDK的embed方法时分别传入不同容器和配置即可，实例之间互不干扰
• 所有嵌入实例的方法、事件绑定互相独立，可单独对单份报表做操作、事件监听

完整示例代码 #

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Power BI JS SDK本地文件 -->
    <script src="./powerbi.min.js"></script>
    <style>
        /* 每份报表容器单独设置宽高，避免样式冲突 */
        .report-box {
            width: 100%;
            height: 600px;
            margin: 20px 0;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <!-- 2份报表各自的独立容器，ID唯一即可 -->
    <div id="report1" class="report-box"></div>
    <div id="report2" class="report-box"></div>

    <script>
        // 公共配置项，可复用减少重复代码
        const commonSettings = {
            type: 'report',
            tokenType: window.powerbi.models.TokenType.Embed,
            settings: {
                panes: {
                    filters: { visible: false },
                    pageNavigation: { visible: true }
                },
                bars: {
                    statusBar: { visible: false }
                }
            }
        };

        // 第一份报表独有配置
        const config1 = {
            ...commonSettings,
            id: '替换为你的第一份报表ID',
            embedUrl: '替换为你的第一份报表嵌入地址',
            accessToken: '替换为你的第一份报表有效嵌入令牌'
        };
        // 嵌入第一份报表
        const reportIns1 = powerbi.embed(document.querySelector('#report1'), config1);

        // 第二份报表独有配置
        const config2 = {
            ...commonSettings,
            id: '替换为你的第二份报表ID',
            embedUrl: '替换为你的第二份报表嵌入地址',
            accessToken: '替换为你的第二份报表有效嵌入令牌'
        };
        // 嵌入第二份报表
        const reportIns2 = powerbi.embed(document.querySelector('#report2'), config2);

        // 可单独为任意报表绑定事件，互不影响
        reportIns1.on('loaded', () => {
            console.log('第一份报表加载完成');
        });
        reportIns2.on('rendered', () => {
            console.log('第二份报表渲染完成');
        });
    </script>
</body>
</html>

注意事项 #

• 每份报表需要使用对应自身的嵌入令牌、报表ID、嵌入地址，不能混用
• 若需要嵌入更多报表，新增对应ID的DOM容器，新增对应配置调用powerbi.embed即可
• 嵌入报表数量较多时建议做懒加载，仅渲染可视区域内的报表，减少页面资源占用
• 若需要实现多报表之间的联动，可通过各自的实例调用SDK提供的setFilters、updateFilters等方法传递参数实现

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