65.9K
CodeProject 正在变化。 阅读更多。
Home

SSRS 报表中适用于非 IE 浏览器（Chrome、Firefox 等）的打印按钮和日期选择器

Shashidhar Rao Nellutla
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.94/5 (11投票s)

2012年12月8日

CPOL

6分钟阅读

viewsIcon

212307

downloadIcon

6919

本文将介绍如何在非 IE 浏览器中实现打印功能和 jQuery 日期选择器。

引言

SQL Server Reporting Services 的 ReportViewer 控件在非 IE 浏览器（如 Chrome、Firefox 等）中存在一些限制。其中一些限制是：

  • 打印按钮不可见。
  • 日期选择器未显示为日期选择器控件。

本文将帮助您解决上述限制，并设计一些复杂的报表。 

背景  

我在网上搜索了许多文章，但都找不到一个包含源代码的更完善的解决方案，因此我想与一些遇到类似问题的同行分享我的经验。希望本文能帮助您节省开发时间。 

我非常感谢那些在网上分享经验和源代码的技术人员，他们帮助我完成了这项工作。 

使用代码 

实现打印功能

通过本文，我们将实现一个解决方案，在报表查看器工具栏上显示一个自定义打印按钮，如下图所示：

我们将使用图像控件作为打印按钮，并且该图像控件将在客户端运行时动态生成（请创建您自己的 GIF 或 JPEG 图像来显示）。

我知道大多数人可能不会同意这种方法，但在经过一个多星期的深入研究后，我得出了通过 AJAX 调用服务器来实现此功能的结论。此解决方案将创建一个临时的会话 PDF 文件，在客户端打印文档，然后删除服务器上的文件。请按照以下步骤进行实现（请确保您在服务器上拥有创建/删除文件的用户权限）。

ASPX 页面的设计

  1. 将您的 ReportViewer 控件放在 ASPX 页面上。
    2. <rsweb:ReportViewer ID="rvREXReport" runat="server" Width="100%" Height="798px"
Style="display: table !important; margin: 0px; overflow: auto !important;" 
ShowBackButton="true" onreportrefresh="rrvREXReport_ReportRefresh">
</rsweb:ReportViewer>
  2. 在 ReportViewer 下方放置一个服务器端 iFrame。
    3.  <iframe id="frmPrint" name="frmPrint" runat="server" style = "display:none"></iframe>
  3. 在 iframe 声明下方放置以下 div 标签（用于在处理打印的 AJAX 请求时显示消息）。
    4. <div id="spinner" class="spinner" style="display:none;">
<table align="center" valign="middle" style="height:100%;width:100%">
<tr>
<td><img id="img-spinner" src="../Images/ajax-loader.gif" alt="Printing"/></td>
<td><span style="font-family:Verdana; font-weight:bold;font-size:10pt;width:86px;">Printing...</span></td>
</tr>
</table>
</div>
  4. 放置 ScriptManager。
    5. <asp:ScriptManager ID="ScriptManager1"  EnablePageMethods="true" 
    EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
  5. CSS 类用于在鼠标悬停在打印按钮上时高亮显示打印按钮（这些 CSS 类可在随附的 ASPX 页面中找到）。

客户端脚本（jQuery/JavaScript）的实现

为了显示打印按钮，我们将创建一个客户端方法，该方法将在运行时生成打印和关闭按钮（请确保在开始实现之前准备好 JPG/GIF 图像）。此方法将在 body 加载事件以及报表刷新事件（在服务器端）时调用。以下是实现方式的解释：

  1. 我们需要找到 ReportViewer 控件的 HTML 代码中刷新按钮所在的位置。
  2. 找到上述步骤中的刷新按钮后，我们需要找到刷新按钮的父元素来添加图像控件。

以下是用于创建打印和关闭按钮的方法：

function showPrintButton() {    
var table = $("table[title='Refresh']");
var parentTable = $(table).parents('table');
 ......remaining code here......

}

提示：在您的计算机上安装开发者工具，以了解放置 ReportViewer 控件在 ASPX 页面上生成的 HTML 代码。

这里我们有两个不同的客户端方法，它们将在打印报表之前和打印报表之后调用：

  1.  打印方法用于向服务器发送 AJAX 请求，在服务器端创建 PDF 并将其分配给 iframe。
    2. function ServerCallBeforePrint(btn) {
 $('#spinner').show();
 var context = new Object(); 
 ......remaining code here......
}
  2. 打印后方法用于向服务器发送 AJAX 请求，以删除上一步中创建的 PDF 文件。
    3. function ServerCallAfterPrint(btn) {
    var context = new Object();
    ......remaining code here......  

}

    提示：随附的 ASPX 页面包含这些方法的完整实现。

显示 jQuery 日期选择器的实现

 

为了实现此功能，我创建了一个客户端方法，将在文档就绪事件时调用。以下是用于显示 jQuery 日期选择器的方法：

function showDatePicker() {
   var parameterRow = $("#ParametersRowrvREXReport");
   ....remaining code here....
}

请不要完全使用上面的代码，因为您的参数行的 ID 可能与上面代码中的行 ID 不同。

以下语句将解释参数行的 ID 是如何生成的：

"ParametersRowrvREXReport" 是参数行的 ID，可以从 ReportViewer 控件生成的 HTML 代码中识别出来（如上所述，您需要安装开发者工具，这是一个免费软件）。

在参数行的 ID 中，名称的第一部分是通用的 "ParametersRow (您的 ReportViewer 名称)"，其余部分将附加您的 ReportViewer 名称。在上面的示例中，我的 ReportViewer 名称是 "rvREXReport"，这就是为什么参数行的 ID 生成为 "ParametersRowrvREXReport"。

此外，为了找到日期选择器控件（在 Chrome/Firefox 中显示为文本框），我使用了标签来查找表格单元格，然后从那里识别出日期控件。请注意，我们不能依赖文本框的名称，因为这是在运行时生成的，可能会有所不同。这就是我使用标签来查找报表上日期控件的原因。

提示：要使用上述代码，请确保在您的报表中使用日期参数。

我在此文章中附带了一个包含源代码的示例项目。请注意，此附件不包含 RDL 文件。

附件项目包含可运行的文件，但不包含支持的 jQuery 文件（jquery-1.4.1.js、jquery-1.4.1.min.js、jquery-1.4.1-vsdoc.js）和相应的图像。附件项目包含用于放置所有文件的正确结构。 我已在我的项目中针对 Google Chrome 充分测试了此代码，希望本文能帮助您满足在非 IE 浏览器中打印报表以及显示 jQuery 日期选择器控件的所有需求。  

注意：我没有在附件项目中包含 SSRS 报表。 在 web.config 文件的 appSettings 部分应用了一些配置设置。请根据您的需求更改这些设置。供您参考，我在附件项目中附带了一个 web.config 文件。

项目包含什么？

  1. 一个 ASPX 页面，实现了在 SSRS 报表查看器中显示打印按钮和日期选择器控件的逻辑。
  2. App_Code 文件夹中的 ReportViewerCredentials.cs，用于向报表提供从 ASPX 页面执行报表的凭据。  
  3. 一个 Web.config 文件，其中包含 appSettings 部分的其他应用程序设置。

最终提示

  1. 将图像放在 "Images"  文件夹下。在此文件夹中放置您自己的 "ajax-loader.gif"。
  2. 确保所有默认 jQuery 文件（jquery-1.4.1.js、jquery-1.4.1.min.js、jquery-1.4.1-vsdoc.js）都位于 scripts 文件夹下。
  3. 将 ReportViewerCredentials.cs 放在项目的 App_Code 文件夹下。
  4. 确保在服务器上拥有创建和删除文件的权限。
  5. 项目中必须引用以下 .NET 库：
    • Microsoft.Build.Framework
    • Microsoft.ReportViewer.Common
    • Microsoft.ReportViewer.WebForms
    • System.Management 

****如果您喜欢这篇文章，请留下您的评论/建议和评分。

历史

如果有任何进一步的更新，将在下一版本中发布。

© . All rights reserved.