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

時間 2019-12-04

標籤 asp.net asp core2 core 調用 azure powerbi 報表展現欄目 ASP 简体版

原文原文鏈接

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

Power BInode

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

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

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

準備web

在着手開始實現以前我們需準備一些必要的環境，以下：後端

一、在Azure上建立一個名爲「iot-pbi」的Power BI 工做區集合，並獲取其訪問Key，留待後面使用。app

二、經過Power BI Desktop工具來設計一個報表名爲「work1.pbix」，並保存到本地磁盤。工具

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

四、成功編譯後在其bin目錄找到「ProvisionSample.exe.config」文件，將其打開，並按自身狀況填寫，以下：

  1 <appSettings file="Cloud.config">
  2 	<!-- Azure訂閱id-->
  3 	<add key="subscriptionId" value="" />
  4 	<!-- Azure資源分組名稱-->
  5 	<add key="resourceGroup" value="" />
  6 	<!-- Powerbi工做區集合名稱 -->
  7 	<add key="workspaceCollectionName" value="" />
  8 	<!-- Powerbi工做區集合名稱訪問key -->
  9 	<add key="accessKey" value="" />
 10 	<!-- Powerbi工做區id-->
 11 	<add key="workspaceId" value="" />
 12 	<!-- Azure登陸帳號 -->
 13 	<add key="username" value="" />
 14 	<!-- Azure登陸密碼 -->
 15 	<add key="password" value="" />
 16 </appSettings>

五、用VS2017開發工具建立一個ASP.NET Core2帶視圖的項目名「WebApplication1」。

實現

經過上述的準備後，我們就能夠進入具體的發佈與集成工做了，以下：

一、由於Azure的用戶臺上暫時無法直接建立Power BI的工做區與報表，因此咱們必需藉助從Github下載編譯的工具「ProvisionSample」來完成Power BI的工做區與報表的管理工做。在bin目錄下找到「ProvisionSample.exe」文件啓動它，截圖以下：

二、依次輸入命令「1」、「6」來建立一個新的工做區，並獲取該工做區的ID。

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

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

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Threading.Tasks;
  5 using Microsoft.AspNetCore.Mvc;
  6 
  7 namespace WebApplication1.Controllers
  8 {
  9     public class PowerbiController : Controller
 10     {
 11         //工做區集合名稱，按自身狀況填寫
 12         private string workspaceCollection = "";
 13         //工做區id，按自身狀況填寫
 14         private string workspaceId = "";
 15         //報表id，按自身狀況填寫
 16         private string reportId = "";
 17         //工做區集合訪問key，按自身狀況填寫
 18         private string token = "";
 19 
 20         public IActionResult Index()
 21         {
 22             //獲取報表訪問的受權token
 23             var embedToken = PowerBIToken.CreateReportEmbedToken(workspaceCollection, workspaceId, reportId);
 24             var ebToken = embedToken.Generate(token);
 25             ViewBag.StrToken = ebToken;
 26             return View(ViewBag);
 27         }
 28     }
 29 }

五、後端代碼編寫完成後，在視圖層加入以下前端代碼：

  1 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
  2 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
  3 
  4 <div id="reportContainer" style="width:100%;height:850px;"></div>
  5 <script>
  6     var token ='@ViewBag.StrToken';
  7     var embedConfiguration = {
  8         type: 'report',
  9         accessToken: token,
 10         id: 'b5904f26-47cc-4455-9025-06258ea5d8f5',
 11         embedUrl: 'https://embedded.powerbi.cn/appTokenReportEmbed'
 12     };
 13 
 14     var reportContainer = $('#reportContainer');
 15     var report = powerbi.embed(reportContainer.get(0), embedConfiguration);
 16 </script>