基於MVC4+EasyUI的Web開發框架經驗總結（15）--在MVC項目中使用RDLC報表

RDLC是一個不錯的報表，有着比較不錯的設計模式和展示效果，在個人Winform開發裏面，使用RDLC也是一個比較方便操做，如能夠參考文章《DevExpress的XtraReport和微軟RDLC報表的使用和對比》或者《會員管理系統的設計和開發（2）-- RDLC報表的設計及動態加載》進行了解。可是基於MVC方式，如何構建和展示RDLC報表呢？本文主要介紹如何在基於MVC4+EasyUI的Web開發框架上進行RDLC的集成和使用。

一、RDLC綁定數據源

RDLC的報表設計，是使用VS直接進行編輯的，所以它不論是在Web上，仍是在Winform上，設計的方式都差很少，好像綁定數據源的方式有一點不一樣，WInform的能夠選擇基於，而Web的只能基於數據庫鏈接方式構建數據綁定對象。

它們二者之間在建立數據源的時候，彈出的對話框選擇界面以下所示，看起來Winform的方式選擇數據源的方式不少樣化。

最終，經過Web方式構建了一個數據集，並在設計視圖裏面設計一個用戶的報表界面，並綁定它們對應的字段，具體以下所示。

在RDLC的設計界面上，它們的操做內容好像是同樣的，沒有什麼差別，可使用各類數學函數SUM、COUNT等，也可使用對字段的表達式，格式樣式等方式，從而方便構建出一些準確、美觀的報表，這部分能夠參考文中開始的那兩篇引用文章，這裏就再也不進行細節上的贅述，由於它們是同樣的。

二、在Web界面上建立一些功能按鈕和實現

咱們在MVC項目裏面，建立並保存好RDLC報表文件到對應的Report目錄上，以下所示。

而後建立一個視圖，並在視圖裏面構建一些按鈕，方便構建查詢不一樣的報表格式功能，具體效果以下所示。

HTML代碼以下所示

    <div style="padding:10px; border:1px solid black">
        <div>
            <a href="@Url.Action("UserRdlcReport", new { format = "Image" })" class="easyui-linkbutton" data-options="iconCls:'icon-view'">圖片輸出</a>
            <a href="@Url.Action("UserRdlcReport", new { format = "PDF" })" class="easyui-linkbutton" data-options="iconCls:'icon-view'"> PDF輸出</a>
            <a href="@Url.Action("UserRdlcReport", new { format = "Excel" })" class="easyui-linkbutton" data-options="iconCls:'icon-view'">Excel輸出</a>
            <a href="@Url.Action("UserRdlcReport", new { format = "Word" })" class="easyui-linkbutton" data-options="iconCls:'icon-view'">Word輸出</a>
        </div>
    </div>
    <div id="autoUpdate" style="display: none; overflow-y: auto" class="SlideContainer">
        <table width="100%" height="100%">
            <tr>
                <td>
                    <table>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr><td><iframe id="myReport" width="100%" height="800"></iframe></td></tr>
        </table>
    </div>

完成這些佈局後，咱們還須要在對應的控制器裏面，對RDLC的報表進行數據綁定並呈現出來。

綁定RDLC報表，並賦值對應的數據源操做以下所示。

            LocalReport localReport = new LocalReport();
            localReport.ReportPath = Server.MapPath("~/Report/WHC.UserReport.rdlc");
            var dt = baseBLL.GetAll();

            ReportDataSource reportDataSource = new ReportDataSource("DataSet1", dt);
            localReport.DataSources.Add(reportDataSource);

呈現的操做代碼以下所示，默認咱們以圖片進行展示。

            Warning[] warnings;
            string[] streams;
            byte[] renderedBytes;

            renderedBytes = localReport.Render(
                reportType,
                deviceInfo,
                out mimeType,
                out encoding,
                out fileNameExtension,
                out streams,
                out warnings);

            return File(renderedBytes, (format.ToLower() == "image") ? "image/jpeg" : mimeType);

最終默承認以看到圖片的報表展示效果。

固然，咱們上面還有其餘功能的操做，如PDF功能的展示，這個是一個不錯的格式展示，每頁分的很好，若是在IE裏面，會獨立打開PDF文件；若是是Chrome瀏覽器，則會在瀏覽器裏面直接打開，比較好。

固然，Excel和Word就只能下載進行查看了，由於瀏覽器並不支持直接在上面進行預覽查看的了，除非藉助其餘控件或者作法。

三、圖片內容的連續輸出

咱們瞭解RDLC的話，應該知道，通常RDLC報表，它都是經過一個DeviceInfo的信息進行展示的，以下所示是一個標準的DeviceInfo對象。

            string deviceInfo =
            "<DeviceInfo>" +
            "  <OutputFormat>" + deviceType + "</OutputFormat>" +
            "  <PageWidth>8.5in</PageWidth>" +
            "  <PageHeight>11in</PageHeight>" +
            "  <MarginTop>0.5in</MarginTop>" +
            "  <MarginLeft>1in</MarginLeft>" +
            "  <MarginRight>1in</MarginRight>" +
            "  <MarginBottom>0.5in</MarginBottom>";

可是這樣的內容，若是展示圖片的話，就只會展現一頁的內容，通常是800的高度這樣子，可是個人報表裏面可能有不少記錄，如何可以讓它所有展示出來呢?

方法是有的，不過不是很完美，就是須要計算大概的尺寸，而後修改PageHeight的數值，讓它動態的刪除最大的記錄，達到所有內容均可以輸出看到。

爲了達到這個目的，我對圖片格式輸出的報表，對它的高度進行了一個簡單的計算，而後換成它的標準高度，這樣代碼以下所示。

            if(format.ToLower() == "image")
            {
                double inchValue = (dt.Count / 37.0) * 11; 
                deviceInfo += string.Format("  <PageHeight>{0}in</PageHeight>", inchValue);
            }
            else
            {
                deviceInfo += "  <PageHeight>11in</PageHeight>";
            }

最後界面代碼以下所示。