RDLC是一個(gè)不錯(cuò)的報(bào)表萧诫,有著比較不錯(cuò)的設(shè)計(jì)模式和展現(xiàn)效果崇堰,在我的Winform開發(fā)里面座享,使用RDLC也是一個(gè)比較方便操作帝嗡,如可以參考文章《DevExpress的XtraReport和微軟RDLC報(bào)表的使用和對比》或者《會員管理系統(tǒng)的設(shè)計(jì)和開發(fā)(2)-- RDLC報(bào)表的設(shè)計(jì)及動(dòng)態(tài)加載》進(jìn)行了解峡蟋。但是基于MVC方式坟桅,如何構(gòu)建和展現(xiàn)RDLC報(bào)表呢华望?本文主要介紹如何在基于MVC4+EasyUI的Web開發(fā)框架上進(jìn)行RDLC的集成和使用。
1仅乓、RDLC綁定數(shù)據(jù)源
RDLC的報(bào)表設(shè)計(jì)赖舟,是使用VS直接進(jìn)行編輯的,因此它不管是在Web上夸楣,還是在Winform上宾抓,設(shè)計(jì)的方式都差不多,好像綁定數(shù)據(jù)源的方式有一點(diǎn)不同豫喧,WInform的可以選擇基于石洗,而Web的只能基于數(shù)據(jù)庫連接方式構(gòu)建數(shù)據(jù)綁定對象。
它們兩者之間在創(chuàng)建數(shù)據(jù)源的時(shí)候紧显,彈出的對話框選擇界面如下所示讲衫,看起來Winform的方式選擇數(shù)據(jù)源的方式很多樣化。
最終孵班,通過Web方式構(gòu)建了一個(gè)數(shù)據(jù)集涉兽,并在設(shè)計(jì)視圖里面設(shè)計(jì)一個(gè)用戶的報(bào)表界面,并綁定它們對應(yīng)的字段篙程,具體如下所示枷畏。
在RDLC的設(shè)計(jì)界面上,它們的操作內(nèi)容好像是一樣的房午,沒有什么差異矿辽,可以使用各種數(shù)學(xué)函數(shù)SUM、COUNT等郭厌,也可以使用對字段的表達(dá)式袋倔,格式樣式等方式,從而方便構(gòu)建出一些準(zhǔn)確折柠、美觀的報(bào)表宾娜,這部分可以參考文中開始的那兩篇引用文章,這里就不再進(jìn)行細(xì)節(jié)上的贅述扇售,因?yàn)樗鼈兪且粯拥摹?br> 2前塔、在Web界面上創(chuàng)建一些功能按鈕和實(shí)現(xiàn)
我們在MVC項(xiàng)目里面,創(chuàng)建并保存好RDLC報(bào)表文件到對應(yīng)的Report目錄上承冰,如下所示华弓。
然后創(chuàng)建一個(gè)視圖,并在視圖里面構(gòu)建一些按鈕困乒,方便構(gòu)建查詢不同的報(bào)表格式功能寂屏,具體效果如下所示。
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>
完成這些布局后,我們還需要在對應(yīng)的控制器里面迁霎,對RDLC的報(bào)表進(jìn)行數(shù)據(jù)綁定并呈現(xiàn)出來吱抚。
綁定RDLC報(bào)表,并賦值對應(yīng)的數(shù)據(jù)源操作如下所示考廉。
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);
呈現(xiàn)的操作代碼如下所示秘豹,默認(rèn)我們以圖片進(jìn)行展現(xiàn)。
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);
最終默認(rèn)可以看到圖片的報(bào)表展現(xiàn)效果昌粤。
當(dāng)然既绕,我們上面還有其他功能的操作,如PDF功能的展現(xiàn)涮坐,這個(gè)是一個(gè)不錯(cuò)的格式展現(xiàn)岸更,每頁分的很好,如果在IE里面膊升,會獨(dú)立打開PDF文件怎炊;如果是Chrome瀏覽器,則會在瀏覽器里面直接打開廓译,比較好评肆。
當(dāng)然,Excel和Word就只能下載進(jìn)行查看了非区,因?yàn)闉g覽器并不支持直接在上面進(jìn)行預(yù)覽查看的了瓜挽,除非借助其他控件或者做法。
3征绸、圖片內(nèi)容的連續(xù)輸出
我們了解RDLC的話久橙,應(yīng)該知道,一般RDLC報(bào)表管怠,它都是通過一個(gè)DeviceInfo的信息進(jìn)行展現(xiàn)的淆衷,如下所示是一個(gè)標(biāo)準(zhǔn)的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>";
但是這樣的內(nèi)容渤弛,如果展現(xiàn)圖片的話祝拯,就只會展示一頁的內(nèi)容,一般是800的高度這樣子她肯,但是我的報(bào)表里面可能有很多記錄佳头,如何能夠讓它全部展現(xiàn)出來呢?
方法是有的,不過不是很完美晴氨,就是需要計(jì)算大概的尺寸康嘉,然后修改PageHeight的數(shù)值,讓它動(dòng)態(tài)的刪除最大的記錄籽前,達(dá)到全部內(nèi)容都可以輸出看到亭珍。
為了達(dá)到這個(gè)目的腊瑟,我對圖片格式輸出的報(bào)表,對它的高度進(jìn)行了一個(gè)簡單的計(jì)算块蚌,然后換成它的標(biāo)準(zhǔn)高度,這樣代碼如下所示膘格。
if(format.ToLower() == "image")
{
double inchValue = (dt.Count / 37.0) * 11;
deviceInfo += string.Format(" <PageHeight>{0}in</PageHeight>", inchValue);
}
else
{
deviceInfo += " <PageHeight>11in</PageHeight>";
}
最后界面代碼如下所示峭范。