Power BI Embedded嵌入Laravel项目过滤功能失效问题求助

数据老陈

2026-7-12

Power BI嵌入报表过滤失效问题排查与解决

在Laravel项目中通过Power BI REST API嵌入报表，报表可正常加载，但基于Excel数据集的Partner Name列设置过滤时失效，以下是问题详情及解决方案：

第一段代码（控制台输出undefined）

该代码重复引入依赖库，控制台输出undefined（由Promise无返回值导致，不影响核心功能，但依赖冲突可能引发潜在问题）：

<head>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>
</head>
<body>
<div id="embedContainer"></div>
<script>
    let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
    let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
    const tokenType = '0';
    let report;
    const models = window['powerbi-client'].models;

    async function embedPowerBIReport() {
        let accessToken = 'eyKoxxxUxIx3RNLWzQ';
        let embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=4ef9a267-68f5-49ff-b292-6a53195f67 a267asdflyZWN0LmFuYWx5c2lzLndpbmRvd3MubmV0IiwiZW1iZWRGZWF0dXJlcyI6eyJtb2Rlcm5FbWJlZCI6dHJ1ZSwidXNhZ2VNZXRyaWNzVk5leHQiOnRydWV9fQ%3d%3d';
        let embedReportId = '4ef9a267-68f5-49ff-b292-6a53195f671f';

        const config = {
            type: 'report',
            tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedReportId,
            permissions: models.Permissions.All,
            settings: {
                filterPaneEnabled: true,
                navContentPaneEnabled: true
            }
        };

        let embedContainer = $('#embedContainer')[0];

        report = powerbi.embed(embedContainer, config);

        report.off("loaded");
        report.on("loaded", function () {
            loadedResolve();
            report.off("loaded");
        });

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

        report.off("rendered");
        report.on("rendered", function () {
            renderedResolve();
            report.off("rendered");
        });
    }

    embedPowerBIReport();

    const filter2 = {
        $schema: "http://powerbi.com/product/schema#basic",
        target: {
            table: "WBL-AllReviews-Export Less Records.csv",
            column: "Partner name"
        },
        operator: "In",
        values: ["WBL-Test"]
    };

    async function fn3() {
        setTimeout(() => {
            report.updateFilters(models.FiltersOperations.Add, [filter2])
        })
    }

    async function fn() {
        try {
            const res1 = await reportLoaded
            console.log('reportLoaded：' + res1)
            const res2 = await reportRendered
            console.log('reportRendered：' + res2)
            const res3 = await fn3()
            console.log('fn3()：' + res3)
        } catch (error) {
            console.log('Error: ' + error)
        }
    }
    fn()
</script>
</body>

控制台输出：

reportLoaded：undefined
powerbi:131 reportRendered：undefined
powerbi:133 fn3()：undefined

第二段代码（无报错但过滤失效）

该代码无报错信息，但过滤器未按预期生效：

<script>
    let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
    let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });
    let report;
    const models = window['powerbi-client'].models;

    function embedPowerBIReport() {
        const accessToken = 'eyJeXAiOxxxxxxxxxxxxxx';
        const embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=4efxxxxxxx-xxxxxd%3dd%3d';
        const embedReportId = '4efxxxxxxxxxxxxxxxxxxxxxx';

        const tokenType = '0';
        const permissions = models.Permissions.All;

        const config = {
            type: 'report',
            tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedReportId,
            permissions: permissions,
            settings: {
                panes: {
                    filters: {
                        visible: true
                    },
                    pageNavigation: {
                        visible: true
                    }
                }
            }
        };

        const embedContainer = $('#embedContainer')[0];
        report = powerbi.embed(embedContainer, config);

        report.off("loaded");
        report.on("loaded", function () {
            loadedResolve();
            report.off("loaded");
        });

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

        report.off("rendered");
        report.on("rendered", function () {
            renderedResolve();
            report.off("rendered");
        });
    }

    async function applyFilter() {
        alert("dsfa");
        const filter = {
            $schema: "http://powerbi.com/product/schema#basic",
            target: {
                table: "WBL-AllReviews-Export Less Records.csv",
                column: "Partner name"
            },
            operator: "In",
            values: ["WBL-Test"]
        };

        await reportLoaded;
        await reportRendered;
        report.updateFilters(models.FiltersOperations.Add, [filter]);
    }

    embedPowerBIReport();

    try {
        setTimeout(applyFilter);
        console.log("Report filter was added.");
    } catch (errors) {
        console.log(errors);
    }
</script>

预期与实际行为

预期行为：报表加载时自动基于Partner Name列过滤数据
实际行为：报表加载成功，但过滤未生效

解决方案

1. 清理重复依赖库

两段代码均重复引入jquery、powerbi-client和powerbi-models，导致版本冲突，保留一套稳定版本即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>

2. 匹配准确的表名与列名

Excel导入Power BI后，表名不会保留.csv后缀，且列名大小写敏感：

表名应改为WBL-AllReviews-Export Less Records（去掉.csv后缀）
列名确认是否为Partner Name（原代码使用Partner name，大小写可能与数据集不匹配）

3. 修正异步逻辑与过滤器操作

直接在报表rendered事件中调用过滤函数，确保报表完全加载后执行过滤操作
使用Replace操作替换现有过滤器，避免多过滤器冲突

4. 修正后的完整代码

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.22.4/powerbi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/powerbi-models@1.12.6/dist/models.min.js"></script>
</head>
<body>
    <div id="embedContainer"></div>
    <script>
        let report;
        const models = window['powerbi-client'].models;

        function embedPowerBIReport() {
            const accessToken = '你的有效AccessToken';
            const embedUrl = '你的报表EmbedUrl';
            const embedReportId = '你的报表ID';
            const tokenType = '0';

            const config = {
                type: 'report',
                tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
                accessToken: accessToken,
                embedUrl: embedUrl,
                id: embedReportId,
                permissions: models.Permissions.All,
                settings: {
                    panes: {
                        filters: { visible: true },
                        pageNavigation: { visible: true }
                    }
                }
            };

            const embedContainer = $('#embedContainer')[0];
            report = powerbi.embed(embedContainer, config);

            // 报表渲染完成后立即应用过滤器
            report.on("rendered", function () {
                applyFilter();
            });

            report.on("error", function (event) {
                console.error('Power BI嵌入错误:', event.detail);
            });
        }

        async function applyFilter() {
            try {
                const filter = {
                    $schema: "http://powerbi.com/product/schema#basic",
                    target: {
                        table: "WBL-AllReviews-Export Less Records",
                        column: "Partner Name"
                    },
                    operator: "In",
                    values: ["WBL-Test"]
                };

                // 替换现有过滤器，避免冲突
                await report.updateFilters(models.FiltersOperations.Replace, [filter]);
                console.log('过滤器已成功应用');
            } catch (error) {
                console.error('应用过滤器失败:', error);
            }
        }

        embedPowerBIReport();
    </script>
</body>

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

Power BI Embedded嵌入Laravel项目过滤功能失效问题求助

第一段代码（控制台输出undefined） #

第二段代码（无报错但过滤失效） #

预期与实际行为 #

解决方案 #