在 React JS 中嵌入 Power BI 报告以获取报告实例

本文介绍了在 React JS 中嵌入 Power BI 报告以获取报告实例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在 React JS 中嵌入 Power BI 报告，我想嵌入报告并让报告实例进一步使用它.我正在使用 Power BI react 扩展来嵌入报告，但我不断收到错误消息，无法读取未定义的属性嵌入".

Index.js

import { powerbi, models, embed } from "powerbi-client";import React, { useState, useEffect } from "react";从react-dom"导入 ReactDOM；函数 ReportBI() {let token =abcExample"；让 embedUrlBi = "app.powerbi/reportEmbed";let reportId = "ReportID";const embedConfig = {类型:报告"，编号:报告编号，embedUrl: embedUrlBi,访问令牌:令牌，令牌类型:models.TokenType.Embed};功能测试() {var embedContainer = document.getElementById(容器");var 报告 = powerbi.embed(embedContainer, embedConfig);控制台日志(报告)；}useEffect(() => {测试();});返回 (<><div id=容器"></div></>);}const 元素 = <ReportBI/>;ReactDOM.render(element, document.getElementById("root"));

索引.html

<div id=容器"></div>

我试图在嵌入报告后获取它的实例以使用它做其他事情.我可以这样做吗?

解决方案

你可以试试新的 powerbi-client-react 库，用于在 React 应用程序中嵌入 PowerBI 实体

getEmbeddedComponent"prop 返回嵌入式 PowerBI 报告的实例

I am trying to embed a Power BI report in React JS and I would like to embed the report and get the report instance to work further with it. I am using Power BI react extension in react to embed the report but I keep getting an error that Cannot read property 'embed' of undefined.

Index.js

import { powerbi, models, embed } from "powerbi-client"; import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; function ReportBI() { let token ="abcExample"; let embedUrlBi = "app.powerbi/reportEmbed"; let reportId = "ReportID"; const embedConfig = { type: "report", id: reportId, embedUrl: embedUrlBi, accessToken: token, tokenType: models.TokenType.Embed }; function test() { var embedContainer = document.getElementById("container"); var report = powerbi.embed(embedContainer, embedConfig); console.log(report); } useEffect(() => { test(); }); return ( <> <div id="container"></div> </> ); } const element = <ReportBI />; ReactDOM.render(element, document.getElementById("root"));

Index.Html

<div id="root"> <div id="container"></div> </div>

I am trying to get instance of the report after embedding it to do other things with it. Can I do this?

解决方案

You may try the new powerbi-client-react library for embedding PowerBI entities in React applications

The "getEmbeddedComponent" prop returns the instance of embedded PowerBI report