ReportViewer工具栏功能扩展[手动设置打印/导出按钮]

ReportViewer在IE11后打印按钮就存在兼容问题,火狐,谷歌也存在打印按钮显示的兼容性问题,本资料就是解决ReportViewer打印按钮显示的问题,
通过自己写脚本添加到DOM里面让所有浏览器都能显示打印和自定义的按钮出来!
参考网络资料

最近在使用Report Service做报表，客户要求报表要以表格形式和图形形式显示，当时我想直接修改ReportViewer的工具栏。于是上网查了相关资料，发现这样方案不太可能，就算能够动态增加按钮，但是对于后台处理也比较麻烦，从通用性上考虑也不太乐观。

后来看到客户端的代码，如下：

ReportViewer发到客户端其实就是div加table。突然萌生了一种想法，就是通过js前台动态加按钮，然后回传给服务器处理。

前台脚本使用的是jQuery，选择jQuery的原因有两个：一、使用起来简单；二、浏览器兼容性支持的好。

为了这段代码通用，开发人员用起来方便，利用了jQuery的($.extend())功能。

插件代码如下：

//ReportViewer控件增加工具按钮

(function() {

$.extend($.fn,

{

methods: {

createButton: function(width, height, type, uri, controlId) {

var A = $("<a></a>");

A.attr("id", type + "_" + "graph");

A.attr("href", "###");

A.attr("uri", uri);

A.css("margin-left", "5px");

var img = $("<img />");

img.attr("src", "../img/" + type + ".png");

img.css("width", width);

img.css("height", height);

img.css("margin-top", "4px");

A.prepend(img);

A.click(function() {

$("input[id$='hid" + controlId + "']").val($(this).attr("uri"));

var lb = $("a[id$='lb" + controlId + "']");

__doPostBack(lb.attr("id").replace(/_/g, "$"),'');

});

return A;

}

},

ReportViewAddTool: function(options) {

options = $.extend({ width: 15, height: 15, url: { table: "###" }, controlId: "CallBack" }, options);

//按钮图片的宽度与高度

var width = options.width;

var height = options.height;

var url = options.url;

var controlId = options.controlId;

var toolbar = $(this).children("div").eq(0);

//创建图片按钮的div

var div = $("<div id='divRVT'></div>");

div.css({ "display": "inline", "font-family": "Verdana", "height": "30px", "font-size": "8pt" });

$.each(url, function(k, v) {

div.prepend($.fn.methods.createButton(width, height, k, v, controlId));

});

toolbar.children("div").eq(0).append(div);

}

}

);

})(jQuery);

客户端实例代码：

<script type="text/javascript">

$(function() {

$(".reportTool").ReportViewAddTool({ url: { table: "SettleSheetRecycleStatistic", column: "SettleSheetRecycleStatisticGraph"} });

});

</script>

<div class="divReportV">

<rsweb:ReportViewer ID="rvPayPlan" runat="server" Width="1000px" Height="390px" Visible="true"

CssClass="reportTool">

</rsweb:ReportViewer>

<asp:HiddenField ID="hidCallBack" runat="server" />

<asp:LinkButton ID="lbCallBack" runat="server" OnClick="lbCallBack_Click"></asp:LinkButton>

</div>

实现效果图：

图1：

图2：

-------------------------------------------------------------------------------------------

根据博主的方法添加发现预览的时候按钮并没有出来于是对博主的脚本进行修改,于是自己对博主的脚本进行了

进一步的修改,修改完成后的效果是:

所有浏览器都兼容,都可以使用,呵呵大功告成!呵呵!

扩展资料源代码下载:

ReportViewer工具栏控件功能扩展