基于MVC4+EasyUI的Web开发框架经验总结(15)--在MVC项目中使用RDLC报表

RDLC是一个不错的报表,有着比较不错的设计模式和展现效果,在我的Winform开发里面,使用RDLC也是一个比较方便操作,如可以参考文章《DevExpress的XtraReport和微软RDLC报表的使用和对比》或者《会员管理系统的设计和开发(2)-- RDLC报表的设计及动态加载》进行了解。但是基于MVC方式,如何构建和展现RDLC报表呢?本文主要介绍如何在基于MVC4+EasyUI的Web开发框架上进行RDLC的集成和使用。

1、RDLC绑定数据源

RDLC的报表设计,是使用VS直接进行编辑的,因此它不管是在Web上,还是在Winform上,设计的方式都差不多,好像绑定数据源的方式有一点不同,WInform的可以选择基于,而Web的只能基于数据库连接方式构建数据绑定对象。

它们两者之间在创建数据源的时候,弹出的对话框选择界面如下所示,看起来Winform的方式选择数据源的方式很多样化。

最终,通过Web方式构建了一个数据集,并在设计视图里面设计一个用户的报表界面,并绑定它们对应的字段,具体如下所示。

在RDLC的设计界面上,它们的操作内容好像是一样的,没有什么差异,可以使用各种数学函数SUM、COUNT等,也可以使用对字段的表达式,格式样式等方式,从而方便构建出一些准确、美观的报表,这部分可以参考文中开始的那两篇引用文章,这里就不再进行细节上的赘述,因为它们是一样的。

2、在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就只能下载进行查看了,因为浏览器并不支持直接在上面进行预览查看的了,除非借助其他控件或者做法。

3、图片内容的连续输出

我们了解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>";
            }

最后界面代码如下所示。

本文转自博客园伍华聪的博客,原文链接:基于MVC4+EasyUI的Web开发框架经验总结(15)--在MVC项目中使用RDLC报表,如需转载请自行联系原博主。

 

时间: 2024-09-28 06:29:57

基于MVC4+EasyUI的Web开发框架经验总结(15)--在MVC项目中使用RDLC报表的相关文章

基于MVC4+EasyUI的Web开发框架经验总结(17)--布局和对话框自动适应大小的处理

在我自己的<Web开发框架>中,用了很多年的EasyUI,最新版本EasyUI为1.4.5,随着版本的更新,其很多功能得到了很大的完善和提高,同时也扩展了一些新的功能,以前在布局和对话框弹出层的自动适应大小的问题,也在最近的一些版本得到了解决,本文在迁移到最新EasyUI版本的时候,总结了一些经验,希望对大家使用这个强大的Web界面组件有所帮助. 1.Web主界面的布局调整 上面的布局是顶部内容+一级菜单.左边菜单,右边主内容为页面内容,页面内容是变化的内容,其他部分为不变的,这样的布局代码如

基于MVC4+EasyUI的Web开发框架经验总结(13)--DataGrid控件实现自动适应宽带高度

在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效果,如果DataGrid能够根据窗口尺寸进行伸缩,效果应该好很多.本文主要介绍DataGrid控件实现自动适应宽带高度的操作. 首先我们需要定义一个resizeDataGrid的扩展函数,方便在页面里面进行调用,扩展函数定义如下所示. //datagrid宽度高度自动调整的函数 $.fn.exten

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式

在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括获取数据并显示,插入新数据到服务器,更新数据,删除数据等操作. 1.利用Jquery获取数据并显示 为了顺利获取数据,我们需要保持页面端调用和服务器端保持一致,并相应的把数据转换或者封装为对象实体进行处理. 下面我们以一个简单的全国省份.全国城市.全国城市行政区的案例进行Demo代码的介绍.    

基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码

在Web开发的时候,我们很多时候,需要引用很多CSS文件.JS文件,随着使用更多的插件或者独立样式文件,可能我们的Web界面代码会越来越臃肿,看起来也很累赘,在MVC里面提供了一个Bundle的对象,用来简化页面代码非常方便,本文主要介绍在我的MVC框架里面,如何使用bundles来简化页面的代码的. 1.常规的页面代码 我们知道,随着使用更多的一些效果,我们可能不断引入一些新的JS和CSS文件,已达到Web界面更好的表现效果.这样也就逐步增加了文件代码的行数,造成相对比较臃肿的场景,如下面的我

基于MVC4+EasyUI的Web开发框架经验总结(8)--实现Office文档的预览

在博客园很多文章里面,曾经有一些介绍Office文档预览查看操作的,有些通过转为PDF进行查看,有些通过把它转换为Flash进行查看,但是过程都是曲线救国,真正能够简洁方便的实现Office文档的预览的还是比较少,这里的Office文档包括了Word.Excel.PPT文档.本文介绍两种方式,一种方式是通过在线预览的方式,利用微软的平台进行Office文档的在线查看:一种是把Office文档生成HTML文件后进行查看.然后对比他们的优缺点,并进行总结. 1.利用微软的平台进行Office文档的在

基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码或者采用其他上传控件(如Uploadify),还有一种方法是使用CKFinder,这两者的合并使用,能给我们带来更多的方便. 1.CKEditor的使用 CKEditor的下载地址是http://ckeditor.

基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

基于MVC4+EasyUI的Web开发框架经验总结(9)--在Datagrid里面实现外键字段的转义操作

我们在使用EasyUI的时候,很多情况下需要使用到表格控件datagrid,这个控件控件非常强大,使用起来很简洁,但是我在使用中,发现对于一个表里面的外键字段进行转义,并显示引用表的一些名称的操作,却显得比较难以实现,找了很多资料,基本上没有找到对应的解决方案.本文主要介绍我对这种外键字段转义的操作的实现方式,以便供大家参考了解. 1.DataGrid的初始化操作 在了解对内容的解析前,我们先来了解EasyUI里面Datagrid的初始化操作过程,然后逐步进行分析,寻求解决方式. 一般情况下,D