借助 Power BI 工作区集合,可以将 Power BI 报表直接集成到 Web 或移动应用程序中。 本文介绍 Power BI 工作区集合 入门示例。
重要
Power BI 工作区集合已被弃用,并将可用至 2018 年 6 月或直到您的合同规定的时间为止。 建议你计划迁移到 Power BI Embedded,以避免应用程序中的中断。 有关如何将数据迁移到 Power BI Embedded 的信息,请参阅 如何将 Power BI 工作区集合内容迁移到 Power BI Embedded。
在进一步讨论之前,请保存以下资源:这些资源在将 Power BI 报表集成到示例应用和你自己的应用中时非常有用。
- 示例工作区 Web 应用
- Power BI 工作区集合 API 参考
- Power BI .NET SDK (通过 NuGet 提供)
- JavaScript 报表嵌入示例
注释
在配置并运行 Power BI 工作区集合入门示例之前,需要在 Azure 订阅中创建至少一个 工作区集合 。 若要了解如何在 Azure 门户中创建 工作区集合 ,请参阅 Power BI 工作区集合入门。
配置示例应用
让我们逐步介绍如何设置 Visual Studio 开发环境以访问运行示例应用所需的组件。
下载并解压缩 Power BI 工作区集合 - 将报表集成到 GitHub 上的 Web 应用示例。
重要
此示例中的某些 URL 只能在全局环境中使用。 若要使其在 Azure 中国环境中正常工作,必须进行一些替换。 例如:将文件\ProvisionSample\App.config中的https://api.powerbi.com替换为https://api.powerbi.cn,将文件\ProvisionSample\Program.cs中的
https://management.azure.com
替换为https://management.chinacloudapi.cn,将文件\ProvisionSample\ProgramExtensions.cs中的https://management.core.windows.net替换为https://management.core.chinacloudapi.cn,将文件中的https://login.windows.net替换为https://login.chinacloudapi.cn。 有关全球和中国 URL 差异的更多详细信息,请参阅 此处。在 Visual Studio 中打开 PowerBI-embedded.sln 。 可能需要在 NuGet 包管理器控制台中执行 Update-Package 命令才能更新此解决方案中使用的包。
生成解决方案。
运行 ProvisionSample 控制台应用。 在示例控制台应用中,预配工作区并导入 PBIX 文件。
若要预配新 工作区,请选择选项 1、 集合管理,然后选择选项 6、 预配新工作区
若要导入新的 报表,请选择选项 2、 报表管理,然后选择选项 3, 将 PBIX Desktop 文件导入工作区。
输入 工作区集合 名称和 访问密钥。 可以在 Azure 门户中获取这些内容。 若要详细了解如何获取 访问密钥,请参阅 Power BI Embedded 入门中的 Power BI API 访问密钥 。
复制并保存新创建的 工作区 ID ,以供本文稍后使用。 创建 工作区 ID 后,可以在 Azure 门户中找到它。
若要将 PBIX 文件导入 工作区,请选择选项 6。将 PBIX 桌面文件导入现有工作区。 如果没有现成的 PBIX 文件,可以下载 零售分析示例 PBIX。
如果系统提示,请输入 数据集的友好名称。
应会看到如下所示的响应:
Checking import state... Publishing
Checking import state... Succeeded
注释
如果 PBIX 文件包含任何直接查询连接,请运行选项 7 以更新连接字符串。
此时,已将 Power BI PBIX 报表导入 工作区。 现在,让我们看看如何运行 Power BI 工作区集合 入门示例 Web 应用。
运行示例 Web 应用
示例 Web 应用程序是一款用于呈现进口到您工作区中的报表的演示应用程序。 下面介绍如何配置 Web 应用示例。
在 PowerBI 嵌入式 Visual Studio 解决方案中,右键单击 EmbedSample Web 应用程序,然后选择 “设为启动”项目。
在 web.config的 EmbedSample Web 应用程序中,编辑 appSettings: AccessKey、 WorkspaceCollection 名称和 WorkspaceId。
<appSettings> <add key="powerbi:AccessKey" value="" /> <add key="powerbi:ApiUrl" value="https://api.powerbi.cn" /> <add key="powerbi:WorkspaceCollection" value="" /> <add key="powerbi:WorkspaceId" value="" /> </appSettings>
运行 EmbedSample Web 应用程序。
运行 EmbedSample Web 应用程序后,左侧导航面板应包含“ 报表 ”菜单。 若要查看导入的报表,请展开 “报表”,然后单击报表。 如果导入了 零售分析示例 PBIX,该示例网页应用将如下所示:
单击报表后, EmbedSample Web 应用程序应如下所示:
探索示例代码
Power BI 工作区集合示例是一个示例 Web 应用,演示如何将 Power BI 报表集成到应用中。 它使用模型View-Controller(MVC)设计模式来演示最佳做法。 本部分重点介绍可在 PowerBI 嵌入式 Web 应用解决方案中浏览的示例代码的一部分。 模型View-Controller(MVC)模式将领域的建模、展示以及基于用户输入的动作分隔为三个单独的类:模型、视图和控制器。 若要了解有关 MVC 的详细信息,请参阅 “了解 ASP.NET”。
Power BI 工作区集合示例代码按如下所示分隔。 每个部分都包含PowerBI-embedded.sln解决方案中的文件名,以便你可以轻松地在示例中查找代码。
注释
本部分汇总了演示如何编写代码的示例代码。 若要查看完整的示例,请在 Visual Studio 中加载PowerBI-embedded.sln解决方案。
型号
该示例具有 ReportsViewModel 和 ReportViewModel。
ReportsViewModel.cs:表示 Power BI 报表。
public class ReportsViewModel
{
public List<Report> Reports { get; set; }
}
ReportViewModel.cs:表示 Power BI 报表。
public classReportViewModel
{
public IReport Report { get; set; }
public string AccessToken { get; set; }
}
连接字符串
连接字符串必须采用以下格式:
Data Source=tcp:MyServer.database.chinacloudapi.cn,1433;Initial Catalog=MyDatabase
使用通用服务器和数据库属性失败。 例如:Server=tcp:MyServer.database.chinacloudapi.cn,1433;Database=MyDatabase;
查看
该视图管理 Power BI 报表和 Power BI 报表的显示。
Reports.cshtml:循环访问 Model.Reports 以创建 ActionLink。 ActionLink 组合如下:
部件 | DESCRIPTION |
---|---|
标题 | 报表的名称。 |
QueryString | 指向 Report ID 的链接。 |
<div id="reports-nav" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
@foreach (var report in Model.Reports)
{
var reportClass = Request.QueryString["reportId"] == report.Id ? "active" : "";
<li class="@reportClass">
@Html.ActionLink(report.Name, "Report", new { reportId = report.Id })
</li>
}
</ul>
</div>
</div>
Report.cshtml:设置 Model.AccessToken 和 PowerBIReportFor 的 Lambda 表达式。
@model ReportViewModel
...
<div class="side-body padding-top">
@Html.PowerBIAccessToken(Model.AccessToken)
@Html.PowerBIReportFor(m => m.Report, new { style = "height:85vh" })
</div>
控制器
DashboardController.cs:创建一个 PowerBIClient,并传递一个 应用令牌。 JSON Web 令牌(JWT)是从 签名密钥 生成的,用于获取 凭据。 凭据用于创建 PowerBIClient 实例。 拥有 PowerBIClient 实例后,可以调用 GetReports() 和 GetReportsAsync()。
CreatePowerBIClient()
private IPowerBIClient CreatePowerBIClient()
{
var credentials = new TokenCredentials(accessKey, "AppKey");
var client = new PowerBIClient(credentials)
{
BaseUri = new Uri(apiUrl)
};
return client;
}
操作结果报告
public ActionResult Reports()
{
using (var client = this.CreatePowerBIClient())
{
var reportsResponse = client.Reports.GetReports(this.workspaceCollection, this.workspaceId);
var viewModel = new ReportsViewModel
{
Reports = reportsResponse.Value.ToList()
};
return PartialView(viewModel);
}
}
任务报表(string reportId)
public async Task<ActionResult> Report(string reportId)
{
using (var client = this.CreatePowerBIClient())
{
var reportsResponse = await client.Reports.GetReportsAsync(this.workspaceCollection, this.workspaceId);
var report = reportsResponse.Value.FirstOrDefault(r => r.Id == reportId);
var embedToken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceId, report.Id);
var viewModel = new ReportViewModel
{
Report = report,
AccessToken = embedToken.Generate(this.accessKey)
};
return View(viewModel);
}
}
将报表集成到应用中
拥有 报表后,可以使用 IFrame 嵌入 Power BI 报表。 下面是 Power BI 工作区集合 示例中 powerbi.js 的代码片段。
init: function() {
var embedUrl = this.getEmbedUrl();
var iframeHtml = '<iframe style="width:100%;height:100%;" src="' + embedUrl +
'" scrolling="no" allowfullscreen="true"></iframe>';
this.element.innerHTML = iframeHtml;
this.iframe = this.element.childNodes[0];
this.iframe.addEventListener('load', this.load.bind(this), false);
}
筛选应用程序中嵌入的报表
可以使用 URL 语法筛选嵌入报表。 为此,请在 iFrame src URL 中添加一个带有 $filter 查询字符串参数和 eq 运算符的 URL,同时指定筛选条件。 下面是筛选器查询语法:
https://app.powerbi.com/reportEmbed
?reportId=d2a0ea38-...-9673-ee9655d54a4a&
$filter={tableName/fieldName}%20eq%20'{fieldValue}'
注释
{tableName/fieldName} 不能包含空格或特殊字符。 {fieldValue} 接受单个分类值。
另请参阅
常见的 Power BI 工作区集合方案
在 Power BI 工作区集合中进行身份验证和授权
嵌入报表
从数据集创建新报表
Power BI Desktop
JavaScript 嵌入示例
更多问题? 尝试参与 Power BI 社区