Question

我正在尝试使用reactjs在网站上显示Power Bi报告，并希望通过表格来过滤信息

我已经完成了处理表格数据的部分，但是当我尝试过滤双功能表格时，我总是会遇到相同的错误

（我正在使用最新版本的jquery和powerbi-client）

drugList.Where(x => x.id == Q).FirstOrDefault().routes.Where(x => x.id == Z).FirstOrDefault().strengths.Where(x => x.id == Y).FirstOrDefault().dosages.RemoveAt(X);

import React from 'react';
import $ from 'jquery';
import * as powerbi from 'powerbi-client';

class Formulario2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {linea: '' };
        this.filter = {
            $schema: 'http://powerbi.com/product/schema#basic',
            target: {
                table: 'RefsLineas',
                column: 'Assemblyline'
            },
            operator: 'eq',
            values: ''
        }

        this.embedConfiguration = {
            type: 'report',
            accessToken: 'correct checked token',
            /*
             * the filters is an array here, you can
             * add more filter like [filter1,filter2,filter3]
             */
            filters: [this.filter], 
            settings: {
                filterPaneEnabled: false 
            }
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({linea: document.getElementById('linea').value});

        event.preventDefault();
        this.initialize();
        this.filterSet(this.state.linea);
    }



    initialize() {
        var config = this.embedConfiguration;

        // Get a reference to the embedded report HTML element
        var $embedContainer = $('#embedContainer');

        // Embed the report and display it within the div container.
        var report = powerbi.embed($embedContainer, config);

        // Report.off removes a given event handler if it exists.
        report.off("loaded");
    }

    filterSet(entrada) {

        this.filter.values = entrada;

        // Get a reference to the embedded report HTML element
        var embedContainer = $('#embedContainer')[0];

        // Get a reference to the embedded report.
        var report = powerbi.get(embedContainer);

        // Set the filter for the report.
        // Pay attention that setFilters receives an array.
        report.setFilters([this.filter])
            .then(function () {
                alert("Report filter was set.");
            })
            .catch(function (errors) {
                alert(errors);
            });
    }

    render() {
        return (
            <div>
                <label>
                    Line:
                    <input type='text' id='linea'  />
                </label>

                <button type='submit' value='Submit' onClick={this.handleClick}>
                  Enviar
                </button>

                <report 
                    embedType='report' 
                    tokenType='Aad' 
                    accessToken={this.embedConfiguration.accessToken}
                    embedUrl={this.embedConfiguration.embedUrl} 
                    embedId={this.embedConfiguration.id} 
                    permissions='All'
                    filterPaneEnabled={true}/>
            </div>
        );
    }
} export default Formulario2;

这是错误：


import React from 'react';
import ReactDOM from 'react-dom'
import Formulario2 from './Formulario2'

ReactDOM.render(<Formulario2/>, document.getElementById('root'));

Answer 1

通过CDN在浏览器中使用 power-client 与通过NPM软件包在JS库中使用它之间存在很小的差异。

在JS库中使用的推荐方法：实例化powerbi服务：

import * as pbi from 'powerbi-client';
...
const powerbi = new pbi.service.Service(
        pbi.factories.hpmFactory,
        pbi.factories.wpmpFactory,
        pbi.factories.routerFactory)
...
report = powerbi.embed(<container>,<config>)

引用this。

Answer 2

我也偶然发现了这个问题，所以这就是我要解决的问题。

import * as pbi from 'powerbi-client';

...

var models = pbi.models;

config = {
    type: 'report',
    id: embedReportId,
    tokenType: models.TokenType.Embed,
    accessToken: accessToken,
    embedUrl: embedUrl,
    permissions: models.Permissions.Read,
    settings:
    {
        filterPaneEnabled: false,
    }
};

var reportContainer = $('#reportContainer')[0];
var report = window.powerbi.embed(reportContainer, config);

您需要使用window.powerbi.embed函数而不是pbi.Embed（这是一个类）。

希望这可以帮助遇到相同问题的任何人！

尝试将power bi嵌入react.app中的错误

2 个答案: