嵌入PowerBI报表时rendered事件触发两次的问题求助

我们使用powerbi-client（版本2.23.1）嵌入PowerBI报表时，发现rendered事件被触发了两次，但预期该事件应在所有视觉对象渲染完成后仅触发一次。相同代码在PowerBI开发者沙箱中测试时无此问题，使用的是官方示例报表。

嵌入代码如下（已补全原代码中缺失的函数定义）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/powerbi-client@2.23.1/dist/powerbi.min.js"></script>
</head>

<body>
    <h1>PowerBI Embedded Sample</h1>
    <div id="embedContainer" style="height: 80vh;"></div>
</body>
<script>
    var config = {
        type: "report",
        tokenType: 0,
        accessToken: '',
        embedUrl: '',
        id: '',
        permissions: 7,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: true,
            visualRenderedEvents: true
        }
    }

    function embedPowerBIReport() {
        report = powerbi.embed(embedContainer, config);

        // report.off removes all event handlers for a specific event
        report.off("loaded");
        report.off("rendered");


        // report.on will add an event handler
        report.on("loaded", function () {
            console.log("loaded")
            report.off("loaded");
        });

        // report.off removes all event handlers for a specific event
        report.off("error");

        report.on("error", function (event) {
            console.log(event.detail);
        });

        // report.on will add an event handler
        let i = 0;
        report.on("rendered", function () {
            // renderedResolve();
            console.log("Rendered event", i++, " ", Date.now());
        });

        report.on("visualRendered",async ()=>{
          console.log("Visual rendered");
        })
    }

    embedPowerBIReport();
</script>

</html>

可能原因及解决办法 #

1. 环境与布局差异 #

本地嵌入环境和沙箱的差异可能触发二次渲染：

• 容器尺寸动态变化：嵌入前确保容器的宽高已固定，避免加载过程中因布局重排触发报表重渲染。
• 资源加载延迟：本地环境的网络或资源加载速度较慢，可能导致报表分阶段完成渲染，触发多次rendered事件。可以尝试优化资源加载顺序，或在页面完全加载后再执行嵌入逻辑。

2. 事件绑定时机问题 #

原代码在powerbi.embed之后才绑定事件，可能嵌入过程中内部已触发过部分事件，导致绑定后重复响应。调整为提前绑定事件：

function embedPowerBIReport() {
    const embedContainer = document.getElementById('embedContainer');
    // 先创建报表实例，暂不嵌入
    const report = powerbi.createReport(embedContainer, config);
    
    // 提前绑定rendered事件
    let isFinalRender = false;
    report.on("rendered", function () {
        if (!isFinalRender) {
            isFinalRender = true;
            console.log("最终渲染完成", Date.now());
            // 可选：解绑事件避免后续触发
            report.off("rendered");
        }
    });

    // 执行嵌入
    report.embed();
}

3. visualRenderedEvents配置影响 #

开启visualRenderedEvents: true会触发单个视觉对象的渲染事件，可能间接导致报表级的rendered事件被多次触发。尝试关闭该配置测试：

settings: {
    filterPaneEnabled: true,
    navContentPaneEnabled: true,
    visualRenderedEvents: false // 关闭单个视觉对象渲染事件
}

4. 报表自身逻辑 #

如果报表包含实时数据刷新、默认钻取交互或动态计算视觉对象，可能会触发二次渲染。可以临时禁用报表的自动刷新、默认交互等设置，排查是否为报表自身导致的重复渲染。

临时规避方案 #

如果暂时无法定位根本原因，可以通过标记状态的方式只处理第一次rendered事件：

let isRenderedCompleted = false;
report.on("rendered", function () {
    if (!isRenderedCompleted) {
        isRenderedCompleted = true;
        console.log("渲染完成", Date.now());
        // 执行后续业务逻辑
    }
});

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