angular - 获取嵌入式 power bi 报告的所有页面

Question

我正在开发 Angular 4 中的嵌入式 Power Bi 应用程序。该应用程序将多个报告（存储在 Azure 上）分组，我想检索每个报告的所有页面，而无需将其加载到容器中。power bi api 显然不允许这样做；有办法吗？

标签： angularreportpowerbi-embedded

Answer 1

我知道它已经很晚了，但可能对像我这样寻找一些代码片段的其他人有用以下获取所有报告页面并创建按钮以将它们嵌入到不同的页面上。

请注意，这是来自 ASP.NET CORE MVC，我可以从提供的模型中呈现我的安全嵌入信息。

希望这可以帮助...

$(document).ready(function () {
  var preloadElement = powerbi.preload({
    type: "report",
    baseUrl: "https://embedded.powerbi.com/reportEmbed",
  });

  $(preloadElement).on("preloaded", function () {
    setupEnhancedReportLinks(
      "#enhanced-report-container",
      @Json.Serialize(Model.EnhancedReports)
    );
  });
});

function setupEnhancedReportLinks(containerName, reportsModel) {
  $.each(reportsModel, function () {
    const config = {
      type: "report",
      id: this.id,
      embedUrl: this.embedUrl,
      accessToken: this.embedToken.token,
      tokenType: models.TokenType.Embed,
      permissions: models.Permissions.All,
      viewMode: models.ViewMode.View,
      settings: {
        filterPaneEnabled: false,
        navContentPaneEnabled: false,
      },
    };

    let elements = [];
    elements.push(
      $("<h4> ")
        .attr({ id: `title-for-${config.id}` })
        .text(this.displayName)
    );
    elements.push($("<div>").attr({ id: `buttons-for-${config.id}` }));

    // Note this element is hidden; loading a report still requires a page element to contain it, so we hide it on creation
    elements.push(
      $("<div>")
        .attr({ id: `report-for-${config.id}` })
        .hide()
    );

    // add all report information into the main dom element
    $(containerName).append(
      $("<div>")
        .attr({ id: `container-for-${config.id}`, class: "well col-lg-12" })
        .append(elements)
    );

    // Load the report
    // fetch, then iterate the pages to create the buttons which are added to the report's button container
    var report = powerbi.load($(`#report-for-${config.id}`)[0], config);
    report.on("loaded", function () {
      report.getPages().then(function (pages) {
        $.each(pages, function () {
          console.log("is this a page", this, config);
          $(`#buttons-for-${config.id}`).append(
            $("<a>")
              .text(this.displayName)
              .attr({
                href: `/EmbeddedReport/EmbedReport?reportId=${config.id}&reportSection=${this.name}`,
                class: "enh-button",
              })
          );
        });
      });
    });
  });
}