ASP.NET Core2調用Azure雲上的PowerBI報表展示

在開發企業應用中，報表功能是當之無愧的重頭戲，如何將數據通過合適的報表呈現出來成為每個項目人員必需面臨的問題。而找到一款合適的報表往往都需要考率價格、開發、風格、支撐等因素。那么，我在這里給大家介紹一款由微軟提供的可視化報表工具Power BI，並通過ASP.NET Core2程序調用雲端的報表（國內的Azure雲），並用代碼方式將報表與項目程序集成起來，以供你有個更好的選擇。

 

Power BI

Power BI 是一套商業分析工具，用於在團隊組織中提供數據報表呈現，並支持多種不同的數據源連接，可生成美觀的報表並進行發布，供團隊人員在 Web端與和移動端上使用。微軟Power BI 工具同時提供一個PC桌面版的客戶端“Power BI Desktop”幫助用戶來設計報表，還提供了一套基於Azure雲端的報表發布部署環境“Power BI Embedded”。而這里我們主要介紹借助“Power BI Embedded”完成報表集成。如下是跟Power BI相關的網址：

Power BI 中文官網：https://powerbi.microsoft.com/zh-cn/

Power BI Embedded 中文官網：https://powerbi.microsoft.com/zh-cn/developers/embedded-analytics/isv/

 

准備

在着手開始實現之前咱們需准備一些必要的環境，如下：

1、在Azure上創建一個名為“iot-pbi”的Power BI 工作區集合，並獲取其訪問Key，留待后面使用。

2、通過Power BI Desktop工具來設計一個報表名為“work1.pbix”，並保存到本地磁盤。

3、從Github上下載一個由微軟開源的管理Azure端Power BI工作區的命令行工具”ProvisionSample“的代碼，使用VS2017打開項目后並編譯它。代碼地址：https://github.com/Azure-Samples/power-bi-embedded-integrate-report-into-web-app。

4、成功編譯后在其bin目錄找到“ProvisionSample.exe.config”文件，將其打開，並按自身情況填寫，如下：

<appSettings file="Cloud.config">
	<!-- Azure訂閱id-->
	<add key="subscriptionId" value="" />
	<!-- Azure資源分組名稱-->
	<add key="resourceGroup" value="" />
	<!-- Powerbi工作區集合名稱 -->
	<add key="workspaceCollectionName" value="" />
	<!-- Powerbi工作區集合名稱訪問key -->
	<add key="accessKey" value="" />
	<!-- Powerbi工作區id-->
	<add key="workspaceId" value="" />
	<!-- Azure登錄賬號 -->
	<add key="username" value="" />
	<!-- Azure登錄密碼 -->
	<add key="password" value="" />
</appSettings>

 

5、用VS2017開發工具創建一個ASP.NET Core2帶視圖的項目名“WebApplication1”。

 

實現

通過上述的准備后，咱們就可以進入具體的發布與集成工作了，如下：

1、因為Azure的用戶台上暫時沒法直接創建Power BI的工作區與報表，所以我們必需借助從Github下載編譯的工具“ProvisionSample”來完成Power BI的工作區與報表的管理工作。在bin目錄下找到“ProvisionSample.exe”文件啟動它，截圖如下：

 

2、依次輸入命令“1”、“6”來創建一個新的工作區，並獲取該工作區的ID。

3、依次輸入命令“2”、“3”來將本地磁盤的文件“work1.pbix”導入到Azure端，並獲取該報表的ID。

4、通過上面幾步后我們已將本地的報表發布到Azure雲端了，那么咱們下一步就來看看如何在ASP.NET Core2項目集成該雲端的報表吧。首先，需在ASP.NET Core2項目中通過Nuget管理器引用第三方庫“PowerBI.NetStandard.Api”（Azure官網提供的類庫“Microsoft.PowerBI.Core”暫時不支持ASP.NET Core），該庫的作用是幫助我們可以很簡便的獲取報表授權的Token，后端代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class PowerbiController : Controller
    {
        //工作區集合名稱，按自身情況填寫
        private string workspaceCollection = "";
        //工作區id，按自身情況填寫
        private string workspaceId = "";
        //報表id，按自身情況填寫
        private string reportId = "";
        //工作區集合訪問key，按自身情況填寫
        private string token = "";

        public IActionResult Index()
        {
            //獲取報表訪問的授權token
            var embedToken = PowerBIToken.CreateReportEmbedToken(workspaceCollection, workspaceId, reportId);
            var ebToken = embedToken.Generate(token);
            ViewBag.StrToken = ebToken;
            return View(ViewBag);
        }
    }
}

 

5、后端代碼編寫完成后，在視圖層加入如下前端代碼：

<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>

<div id="reportContainer" style="width:100%;height:850px;"></div>
<script>
    var token ='@ViewBag.StrToken';
    var embedConfiguration = {
        type: 'report',
        accessToken: token,
        id: 'b5904f26-47cc-4455-9025-06258ea5d8f5',
        embedUrl: 'https://embedded.powerbi.cn/appTokenReportEmbed'
    };

    var reportContainer = $('#reportContainer');
    var report = powerbi.embed(reportContainer.get(0), embedConfiguration);
</script>

 

6、至此，基於ASP.NET Core2項目的前后端代碼就全部編寫完成，運行項目后效果如下：

 

總結

1、Azure雲的用戶台暫時沒提供管理Power BI工作區、報表的功能，所以這里借助開源工具“ProvisionSample”來完成管理。

2、Power BI發布到網頁前端后是通過由后端生成的一個Token來完成身份認證的，如果沒有該Token報表則無法正常打開呈現。

3、Azure官網提供的類庫“Microsoft.PowerBI.Core”暫時不支持ASP.NET Core，這里使用第三方庫“PowerBI.NetStandard.Api”來獲取報表的授權Token。

 

聲明

本文為作者原創，轉載請備注出處與保留原文地址，謝謝。如文章能給您帶來幫助，請點下推薦或關注，感謝您的支持！