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：
-------------------------------------------------------------------------------------------
根據博主的方法添加發現預覽的時候按鈕並沒有出來於是對博主的腳本進行修改,於是自己對博主的腳本進行了
進一步的修改,修改完成后的效果是:
所有瀏覽器都兼容,都可以使用,呵呵大功告成!呵呵!
擴展資料源代碼下載: