Встраивание отчета Power BI на новой вкладке

Вопрос или проблема

Ответ или решение

Для встраивания отчета Power BI на новую вкладку в вашем приложении на основе VueJS, необходимо выполнить несколько шагов. Это может быть выполнено с использованием встроенных ссылок на отчет Power BI или с помощью метода программного контроля. Давайте рассмотрим оба подхода.

Шаги для встраивания отчета Power BI на новую вкладку

1. Получение ссылки на отчет:
   Прежде всего, вам нужно получить URL-адрес вашего отчета Power BI. Это можно сделать следующим образом:

   • Войдите в Power BI и откройте отчет, который вы хотите встроить.
   • Найдите кнопку "Поделиться" или "Опубликовать в Интернете" (учтите, что второй вариант делает отчет публичным).
   • Скопируйте предоставленную ссылку.

2. Создание новой вкладки в VueJS:
   В вашем VueJS-приложении вы можете создать функцию, которая будет открывать новый URL-адрес отчета в новой вкладке. Пример кода:

   methods: {
      openReport() {
          const reportUrl = 'URL_ВАШЕГО_ОНЛАЙН_ОТЧЕТА';  // Вставьте сюда ваш URL
          window.open(reportUrl, '_blank');
      }
   }

3. Привязка метода к кнопке:
   Теперь вы можете привязать этот метод к кнопке или другому элементу интерфейса, чтобы пользователи могли нажать на него и открыть отчет.

   <template>
      <div>
          <button @click="openReport">Открыть отчет Power BI</button>
      </div>
   </template>

Альтернативный метод: Встраивание отчета через API

Если вам требуется более глубокая интеграция, например, включение отчета непосредственно в элемент интерфейса, вам придется использовать Power BI JavaScript API.

1. Импортируйте Power BI JavaScript API:
   Убедитесь, что библиотека Power BI Embedded API подключена в вашем проекте.

   <script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.18.1/powerbi.min.js"></script>

2. Используйте API для встраивания:
   Вы можете использовать API прямо на своем новом компоненте или странице со следующими шагами:

   • Создайте компонент встраивания отчета.
   • Используйте powerbi объект для встраивания.

   Пример кода:

   mounted() {
      const embedToken = 'ВАШ_EMBED_TOKEN'; // Получите токен встраивания через ваш бекенд
      const reportId = 'ID_ВАШЕГО_ОТЧЕТА';
      const embedUrl = 'URL_ВАШЕГО_EMBED_ОТЧЕТА';
   
      const models = window['powerbi-client'].models;
      const config = {
          type: 'report',
          id: reportId,
          embedUrl: embedUrl,
          accessToken: embedToken,
          tokenType: models.TokenType.Embed,
          settings: {
              filterPaneEnabled: false,
              navContentPaneEnabled: false
          }
      };
      const reportContainer = document.getElementById('reportContainer');
      const report = powerbi.embed(reportContainer, config);
   }

3. Создание HTML для нового компонента:
   Обязательно создайте контейнер для отчета, например:

   <template>
      <div id="reportContainer" style="height: 600px;"></div>
   </template>

Таким образом, вы можете создать новый интерфейс во VueJS, который будет встраивать отчет Power BI непосредственно в вашу веб-страницу или открывать отчет в новой вкладке в зависимости от ваших потребностей. Если у вас есть дополнительные вопросы или нужна помощь в настройках, не стесняйтесь спрашивать!