Angular5 PowerBI 嵌入不工作

标签 angular angular5 powerbi powerbi-embedded

我正在尝试获取在 angular5 应用程序中工作的示例 power BI 嵌入(用户拥有数据模式)。以下是我到目前为止所做的:

  1. 安装了 powerbi 和 powerbi 客户端 npm 包。
  2. 我已经创建了一个 AAD 应用程序并授予了对 powerbi api 的所有访问权限。

下面是我的组件的代码:

import { Component, OnInit } from '@angular/core';
import * as pbicli from 'powerbi-client';
import {AuthenticationService} from '../authentication';
@Component({
  selector: 'app-powerbi-qna',
  templateUrl: './powerbi-qna.component.html',
  styleUrls: ['./powerbi-qna.component.scss']
})
export class PowerbiQnaComponent implements OnInit {
embedToken: string;
  constructor(private authSvc: AuthenticationService) { }

  ngOnInit() {
    // get embed tokens

    this.loadDashboard();
  }
loadDashboard() {
// Read embed application token from textbox
this.displayDashboard(this.authSvc.getCachedToken());
}
displayDashboard(token: string) {
const embedUrl = 'https://app.powerbi.com/reportEmbed?reportId=<reportid>';
const embedReportId = '<reportid>';
const config = {
    type: 'report',
    tokenType: 0,
    accessToken: token,
    embedUrl: embedUrl,
    id: embedReportId,
    permissions: 7,
    settings: {
    }
};
// Get a reference to the embedded report HTML element
const embedContainer = <HTMLElement>document.getElementById('powerBiEmbed');
const powerbi = new pbicli.service.Service(pbicli.factories.hpmFactory, pbicli.factories.wpmpFactory, pbicli.factories.routerFactory);
// Embed the report and display it within the div container.
const report = powerbi.embed(embedContainer, config);
// Report.off removes a given event handler if it exists.
report.off('loaded');
// Report.on will add an event handler which prints to Log window.
report.on('loaded', function() {
  console.log('Loaded');
});
report.on('error', function(event) {
  console.log(event.detail);
    report.off('error');
});
report.off('saved');
report.on('saved', function(event) {
    console.log(event.detail);
 });
}
}

但是一切都不起作用,我在控制台中遇到以下异常: 获取https://wabi-west-europe-redirect.analysis.windows.net/metadata/cluster 403(禁止)

我正在尝试使用已登录用户的许可证访问 powerbi(用户拥有数据) 我在这里缺少什么?

最佳答案

我遇到了同样的问题。对我来说,解决方案是我使用了错误的 tokenTypehttps://github.com/Microsoft/PowerBI-JavaScript/wiki/Embedding-Basics声明对于“应用程序拥有”数据,应使用 Embed

来自 https://github.com/Microsoft/powerbi-models/blob/baaaf184d4966b09094a2539a538bf10c6cb69c4/src/models.ts :

export enum TokenType {
    Aad,
    Embed
}

关于Angular5 PowerBI 嵌入不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49508532/

相关文章:

javascript - 新组件加载 Angular 后焦点不会改变

javascript - Angular 5 嵌套数组

angular - 将日期范围添加到 NgbInputDatepicker 输入字段

typescript - 如何在 TypeScript 中等待 Http 应答 - Angular 5

powershell - 无法输出到 CSV 文件。我知道输出是一个大括号 "collection",但我很难过

powerbi - Power BI - 将字符串输入拆分为表中的新行

powerbi - 电源BI : Filter based on SUM

javascript - 单击输入打开列表并根据所选选项创建数组

angular - 检查后表达式发生了变化。先前值 : 'ng-valid: true' . 当前值: 'ng-valid: false'

angular - 命名路由器导出和延迟加载模块