Power BI Embedded - 筛选不起作用

问题描述 投票:0回答:1

我正在尝试使用 Power BI REST API 将 Power BI 报告嵌入到我的 Laravel 项目中。报告加载成功。但是,我在向报告应用筛选器时遇到问题,特别是使用 Excel 数据集中名为“合作伙伴名称”的列作为筛选器。我还包括我的图书馆的导入代码。

<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/[email protected]/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/[email protected]/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>

上面的代码会导致如下错误,

报告已加载:未定义 powerbi:131 报告渲染:未定义 powerbi:133 fn3():未定义

我还使用以下代码片段尝试了不同的方法: 此代码不会导致任何错误,但过滤部分不起作用。

<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> 

预期行为:我希望 Power BI 报告在加载报告时根据“合作伙伴名称”列筛选数据。

实际行为:报告加载成功,但未按预期应用过滤。

javascript laravel powerbi powerbi-embedded powerbi-rest-api
1个回答
0
投票

请检查您传递的表名参数是否正确?参数中不应有 .csv 文件扩展名。验证 Power BI 服务中的表名称并传递与参数相同的名称。

过滤前:

过滤后:

© www.soinside.com 2019 - 2024. All rights reserved.