Внедрение элемента Power BI в приложение React
При создании приложения встроенной аналитики Power BI React поможет оптимизировать производительность с интеграцией начальной загрузки, используя все клиентские API, включая разработку отчетов. Кроме того, это упрощает управление жизненным циклом внедрения Power BI в приложение. Компонент Power BI React поддерживает JavaScript и TypeScript и помогает внедрить аналитику в веб-приложение React.
Библиотека React позволяет внедрить следующие элементы Power BI:
- Отчеты
- Панели мониторинга
- Плитки панели мониторинга
- Визуальные элементы отчета
- Вопросы и ответы
Внедрение элемента Power BI в веб-приложение React
В этом разделе описывается, как импортировать React в приложение и использовать его для внедрения отчета Power BI.
Подробные сведения об использовании см. в файле
Импорт библиотеки React
Компонент Power BI React можно найти на NPM. Он также открыт для GitHub.
Чтобы импортировать React в веб-приложение, добавьте перечисленные импорты:
import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';
Внедрение отчета с помощью React
В этом примере показано, как внедрить отчет Power BI с помощью React. Ниже приведен пример описания каждого компонента в примере кода.
embedConfig = {
{
type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
id: '<Report Id>',
embedUrl: '<Embed Url>',
accessToken: '<Access Token>',
tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
settings: {
panes: {
filters: {
expanded: false,
visible: false
}
},
}
}
}
eventHandlers = {
new Map([
['loaded', function () {
console.log('Report loaded');
}],
['rendered', function () {
console.log('Report rendered');
}],
['error', function (event) {
console.log(event.detail);
}]
])
}
cssClassName = {
"report-style-class"
}
getEmbeddedComponent = {
(embeddedReport) => {
window.report = embeddedReport;
}
}
В следующем списке содержатся описания или дополнительные сведения для каждого компонента в примере фрагмента кода.
Встраивание конфигурации. Определяет содержимое, которое вы внедряете, и задает параметры содержимого. Изменения конфигурации внедрения при внедрении следующих элементов Power BI:
- Пожаловаться
- визуальный отчета
- отчета
с разбивкой на страницы - автономный Q&визуальный
- Щиток
- плитка панели мониторинга
eventHandlers — объект карты для имен событий и их обработчиков. Дополнительные сведения см. в обработке событий.
cssClassName — предоставляет внедренный элемент имена классов CSS, которые позволяют управлять стилем внедренного iframe с помощью CSS.
getEmbedComponent — обратный вызов, который помогает получить внедренный экземпляр, чтобы можно было использовать все ИНТЕРФЕЙСы API клиентской библиотеки Power BI. Например, при внедрении отчета вы получите экземпляр класса Report.
Загрузка компонента
powerbi.bootstrap
— это метод, используемый для ускорения внедрения элементов Power BI и повышения производительности. Дополнительные сведения см. в разделе Использование bootstrap для повышения производительности.
embedConfig = {
{
type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
id: undefined,
embedUrl: undefined,
accessToken: undefined, // Keep as an empty string, null, or undefined.
tokenType: models.TokenType.Embed
}
}
Демонстрация React
Репозиторий React включает демонстрацию, которая иллюстрирует полный поток загрузки отчета, внедрения и обновления внедренного отчета. Он также демонстрирует использование библиотеки отчетов powerbi
Дополнительные сведения см. в разделе демонстрации файла readme.
Запуск демонстрации
Демонстрация — это вложенная папка в репозитории. Чтобы запустить демонстрацию на localhost, выполните следующие действия:
Выполните следующие команды:
npm run install:demo npm run demo
Чтобы просмотреть в браузере, перенаправьте его на
http:/localhost:8080/
.