Поделиться через

Внедрение содержимого Power BI в приложение Vue

Vue — это платформа JavaScript для создания интерфейсных пользовательских интерфейсов и веб-сайтов. Компонент Vue позволяет просто внедрять содержимое Power BI в приложение Vue, что позволяет сделать большую часть как Vue, так и Power BI embedded.

Библиотека vue.js Power BI позволяет внедрить следующие элементы Power BI в приложение Vue:

  • Отчеты
  • Панели мониторинга
  • Плитки панели мониторинга
  • Визуальные элементы отчета
  • Вопросы и ответы
  • Отчеты с разбивкой на страницы

Внедрение содержимого Power BI в веб-приложение Vue

В этом разделе описывается, как импортировать Vue в приложение и использовать его для внедрения отчета Power BI.

Подробные сведения об использовании см. в файле readme Power BI Vue.

Импорт библиотеки Vue

Компоненты Vue Power BI можно найти в NPM. Он также открыт для GitHub.

Чтобы импортировать Vue в веб-приложение, добавьте импорт, указанный ниже.

import { PowerBIEmbedModule } from 'powerbi-client-vue-js';

Внедрение отчета с помощью Vue

В этом примере показано, как внедрить отчет Power BI с помощью Vue. Ниже приведено описание каждого компонента в примере кода.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

В следующем списке содержатся описания или дополнительные сведения для каждого компонента в примере фрагмента кода.

  • embedConfig — определяет содержимое, которое вы внедряете, и задает параметры содержимого. Изменения конфигурации внедрения при внедрении следующих элементов Power BI:

  • cssClassName — предоставляет внедренный элемент имена классов CSS, которые позволяют управлять стилем внедренного iframe с помощью CSS.

  • поэтапное. Улучшает взаимодействие конечных пользователей, предоставляя разработчикам больше гибкости для внедрения отчетов на этапе. Дополнительные сведения см. в статье Использование поэтапного внедрения.

  • eventHandlers — объект карты для имен событий и их обработчиков. Дополнительные сведения см. в обработке событий.

Загрузка отчета Power BI

powerbi.bootstrap — это метод, используемый для ускорения внедрения элементов Power BI и повышения производительности. Дополнительные сведения см. в разделе Использование bootstrap для повышения производительности.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Чтобы внедрить отчет после начальной загрузки, обновите внедренную конфигурацию (по крайней мере accessToken и embedUrl).

Демонстрация Vue

Репозиторий Vue включает демонстрацию, которая внедряет пример отчета с помощью компонента PowerBIReportEmbed. Он демонстрирует полный поток загрузки отчета, внедрения и обновления внедренного отчета. В нем также показано, как использовать библиотеку отчетов powerbi powerbi, позволяя пользователю изменять тип визуального элемента из отчета с помощью кнопки "Изменить тип визуального типа". Он также задает событие DataSelected.

Дополнительные сведения см. в разделе демонстрации файла readme.

анимированный GIF-файл, показывающий демонстрацию Power BI Vue.

Запуск демонстрации

Демонстрация — это вложенная папка в репозитории. Чтобы запустить демонстрацию на localhost, выполните следующие действия:

  1. Выполните следующие команды:

    npm run demo

  2. Чтобы просмотреть в браузере, перенаправьте его на http:/localhost:3000/.

Связанное содержимое