很久沒用 RDLC 報表跟 Report Viewer,這幾天有機會試著在 VS 2017 編輯 RDLC 報表,發現做法跟以往不同,做個筆記。

首先,Visual Studio 2015 時代 Report Service 報表被包含於 Microsoft SQL Servers Data Tools 安裝選項, VS2017 改為要額外下載安裝:Microsoft Rdlc Report Designer for Visual Studio - Visual Studio Marketplace

安裝過程遇到小插曲-安裝程式回報找不到可支援的 Visual Studio 版本!直到 VS2017 安裝 Update 後才告排除。

安裝 Report Designer 後即可在專案中新増或編輯 RDLC 報表。要新増專案項目時則發現另一事:猜猜 Report 屬於哪個子分類,Data?SQL Server?還是 General?都不是,它被歸於 Visual C# 的直屬清單,不屬於任何分類。平時使用時,直接在右上角「Search Installed Temlates (Ctrl+E)」欄位輸入"report" 篩選比較快。

接著來看如何在網頁顯示 RDLC 報表。目前為止,使用 WebForm 配合 ReportViewer Control 是唯一做法,若是 ASP.NET MVC 專案,也建議加一個專屬 WebForm 顯示報表比較省時省力。使用純 JavaScript / HTML5 呈現 RDLC 報表理論上可行,但目前我沒發現可用的元件或程式庫。

這個年代,ReporViewer 元件當然也該改由 NuGet 下載,不再走下載程式跑安裝程序註冊元件的老路。不過,NuGet 裡的 ReportViewer 套件版本挺亂,輸入 "reportviewer" 關鍵字你會看到一堆版本各異,由網友(套件名稱後方不是 by Microsoft)整理上傳的安裝套件:

試了幾個網友打包的版本,用起來倒也沒什麼問題。如果你要找由微軟官方維護的最新版,關鍵字請輸入 "reportviewercontrol":

目前最新版是 14.0.0.0,安裝 NuGet 套件的同時,web.config 會自動加上 buildProviders、httpHandlers 等必要設定:

<system.web>
  <compilation debug="true" targetFramework="4.5.2">
    <buildProviders>
      <add extension=".rdlc" type="Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91" />
    </buildProviders>
    <assemblies>
      <add assembly="Microsoft.ReportViewer.Common, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91" />
      <add assembly="Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91" />
    </assemblies>
  </compilation>
  <httpRuntime targetFramework="4.5.2" />
  <httpHandlers>
    <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845DCD8080CC91" validate="false" />
  </httpHandlers>
</system.web>

依據官方部落格教學,在 WebForm 加上組件註冊宣告:

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=14.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

在 WebForm 中加上 ScriptManager 跟 rsweb:ReportViewer 控制項,

<asp:ScriptManager runat="server"></asp:ScriptManager>
<rsweb:ReportViewer ID="rptViewer" runat="server" Width="850px" Height="680px">
</rsweb:ReportViewer>

在 Server 端設好 LocalReport 屬性,就能在網頁顯示 RDLC 報表了:

但新版 ReportViewer 的工具列讓我大吃一驚,完全走 RWD、Bootstrape 風的大圖示、寬間隔,與我手邊現有專案慣用的緊密小字樣式格格不入!所幸,工具列樣式不難透過 CSS 調整,開 F12 研究後加了幾行 <style>,簡單調整緊緻拉提一番,先減少突兀感,至於要更美觀的任務就要靠負責 UI 設計的同事換圖示整型了。

順手附上我的拉皮設定:

    <style>
span.glyphui {
    margin: 1px;
}
.ToolbarPageNav input {
    margin: 1px;
}
.ToolbarRefresh.WidgetSet,
.ToolbarPrint.WidgetSet,
.ToolbarBack.WidgetSet,
.ToolbarPowerBI.WidgetSet {
    height: 32px;
}
.WidgetSet {
    height: 32px;
}
.HoverButton {
    height:32px;
}
.NormalButton {
    height:32px;
}
.NormalButton table,
.HoverButton table,
.aspNetDisabled table {
    width: 56px;
}
.DisabledButton {
    height:32px;
}
.ToolbarFind,
.ToolbarZoom {
    padding-top: 3px;
}
.ToolBarBackground {
    background-color: #bdbdbd!important;
}
    </style>

Comments

# by 棉花

請問目前ASP.NET MVC是不是沒有原生的ReportViewer? 我找了許多文章,只有看到非官方的ReportViewerForMvc https://www.nuget.org/packages/ReportViewerForMvc/

# by Jeffrey

to 棉花,ReportViewer是WebControl必須活在WebForm裡,這個非官方NuGet偷偷生出一個小WebForm執行ReportViewer再透過IFrame內嵌,有點Hacking,但應該是唯一解法。我自己的做法是另外開個WebForm跑ReportViewer再用IFrame內嵌,原理也差不多。

# by 棉花

再請教一下 RDLC算是快被淘汰的東西嗎? 最近公司因為crystal report版權的問題,正在尋找替代工具 原本想用RDLC,同事卻說RDLC已經過時了 後來研究SSRS時,一直卡在驗證這一塊 目前的需求是在後端把報表產生後轉成pdf檔,再將pdf檔回傳給前端 公司的專案是用ASP.NET MVC開發的 這部分用RDLC應該就能解決吧

# by Jeffrey

to 棉花,RDLC必須配合WebForm使用,但在ASP.NET MVC中要加個WebForm再用IFrame整進MVC View倒也不是難事。我個人是沒看到更新穎且功能與方便性可取代RDLC的解決方案(不過我很久沒研究這一塊,可能已經Lag),如果在這種情況下把它淘汰,專案開發工具會缺一角。倒是可以問問你同事是否知道替代方案,若有不妨跟大家分享。

Post a comment


82 - 17 =