尝试在powerjs应用程序中嵌入power bi的错误

Question

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

我已经完成了处理表单数据的部分，但是当我尝试过滤我的Power Bi表单时，我总是遇到相同的错误

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

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'));

这是错误：

TypeError: powerbi_client__WEBPACK_IMPORTED_MODULE_2__.embed is not a function

Formulario2.initialize
D:/trabajo/web/src/Formulario2.js:48

  45 | var $embedContainer = $('#embedContainer');
  46 | 
  47 |//Embed the report and display it within the div container.
> 48 | var report = powerbi.embed($embedContainer, config);
  49 | 
  50 | // Report.off removes a given event handler if it exists.
  51 | report.off("loaded");

Answer 1

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

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（这是一个类）。

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